ヘッダーにつけているグローバルメニューの背景色について

初心者です。教えてください。
ヘッダーにナビゲーションメニューを設置していて、その背景は黒にしています。文字は白です。

css
1#menu {
2 position: relative;
3 width: 100%;
4 padding-left: 0px;
5 height: 40px;
6 background: #343838;/*グローバルメニュー背景色*/
7}
8.menu-inner{
9 width: 700px;/*グローバルメニュー 幅*/
10 margin: 0 auto;
11 height: 40px;
12}
13#menu li {
14 list-style-type: none;
15 float: left;
16 height: 40px;
17 text-align: center;
18 width: 20%;
19}
20#menu li a {
21 display: block;
22 color: #ffffff;/*グローバルメニュー文字色*/
23 font-size: 80%;
24 font-weight: bold;
25 line-height: 40px;
26}
27#menu li:hover a {
28 color: #00DFFC;
29 background: #ffffff;
30 transition: all .5s;
31}
32
33.menu-toggle{
34 display: none;
35} 
36
37/*パソコン１カラム*/
38@media screen and (max-width:968px){
39    .menu-inner{
40        width: 768px;
41    }
42}
43
44/*タブレット*/
45@media screen and (max-width:768px){
46 #top-editarea{
47  height: auto;
48  background: #343838;/*MENU背景色*/
49  text-align: left;/*MENUの文字の位置*/
50  width: 90%;
51opacity: 0.9;
52 }
53 .menu-toggle{
54  color: #ffffff;/*MENUの文字色*/
55  display: inline-block;
56  padding: 5px;
57  margin: 3px;
58 }
59 #menu {
60  width: 100%;
61  display: none;
62  height: initial;
63  padding: 0;
64  margin: 0;
65
66 }
67 .menu-inner{
68  width: 100%;
69  height: initial;
70  position: static;
71  margin: 0;
72 }
73 #menu li{
74  float: none;
75  height: 35px;
76  width: 100%;
77  list-style-type: none;
78  background: #FFFFFF;/*リスト文字の背景色*/
79  margin: 0 auto;
80  text-align: left;/*リストの文字の位置*/
81 }
82 #menu li a {
83  height: initial;
84  color: #343838;/*リスト文字色*/
85  display: block;
86 }
87 #menu li:hover a{
88  color: initial;
89  background: initial;
90 }
91}

ヘッダーへ入力したもの

HTML
1<p>テスト</p>
2<script type="text/javascript">
3var nend_params = {"media":65121,"site":336646,"spot":997095,"type":1,"oriented":1};
4</script>
5<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
6<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
7<ul id='menu'>
8<div class="menu-inner">
9<li><a href='https://meipapa.hatenablog.jp/'>TOP</a></li>
10<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1'>オススメ</a></li>
11<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA'>カスタマイズ</a></li>
12<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9'>ニュース</a></li>
13<li><a href='https://meipapa.hatenablog.jp/archive/category/%E6%95%99%E8%82%B2'>教育</a></li>
14</div>
15</ul>

このヘッダーの上に例えば文字や文章を入力したとき、その背景も黒くなってしまうのですが、何か解決方法があれば教えていただきたいです。
特にスマホからページを見ると、このようになります。

パソコンからはこうです。

例えば、ヘッダーに広告や文字を置いて（背景なし）、そこから改行をして、次の行から黒い背景にするようなことは可能でしょうか？

m.ts10806

2020/04/19 20:49

>可能でしょうか？「可能です」だけで良いでしょうか。

papapapa

2020/04/19 21:30

解決方法を教えていただきたいのですが、だめでしょうか？

m.ts10806

2020/04/19 21:34

質問編集して「得たいアドバイス」が得られるような質問にしてください。あと「このヘッダーの上に例えば文字や文章を入力したとき、その背景も黒くなってしまう」が再現できるコードも別途提示してください。

行動規範の内容に同意します

回答1件

えっ、これって背景色指定してる要素と同じとこに文字色指定すれば済む話じゃないんすか？

CSS
1#menu {
2 position: relative;
3 width: 100%;
4 padding-left: 0px;
5 height: 40px;
6 background: #343838;/*グローバルメニュー背景色*/
7 color: #fff; /* 追加 */
8}