ヘッダーの背景について

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

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: initial;
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>

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

kai0310

2020/04/18 07:23

えっと、こうゆうことでしょか？ https://codepen.io/k011510/pen/VwvjajW 擬似クラスで背景色が変わる様に指定されている様ですが、それではダメなのですか？ご確認ください。

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

関連した質問