ドリルダウンの子要素の背景に白色をつけたい

ドリルダウンの子要素の背景に白色をつけたい。htmlに

<ul id="dropmenu">
  <li class="dropitem"><a href="#">名前</a>
    <ul>
       <li><a href="#">Tom</a></li>
       <li><a href="#">Juddy</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">住所</a>
    <ul>
       <li><a href="#">NY</a></li>
       <li><a href="#">London</a></li>
    </ul>
  </li>

  <li class="dropitem"><a href="#">職業</a>
    <ul>
       <li class="nextitem"><a href="#">ビジネスマン</a>
           <ul>
              <li><a href="#">金融</a></li>
              <li><a href="#">医療</a></li>
              <li><a href="#">製造</a></li>
           </ul>
       </li>
       <li class="nextitem"><a href="#">その他</a>
           <ul>
              <li><a href="#">主婦</a></li>
              <li><a href="#">フリーター</a></li>
              <li><a href="#">その他</a></li>
           </ul>
       </li>
    </ul>
  </li>
  </ul>

<script>
  
$(function() {
  $('#dropmenu a').siblings().hide().end().click(function(event){
    $(this).siblings().toggle();
    event.preventDefault();
    return false;
  });
});

</script>

と書き、cssに

#mainsection{
 background-color:white;
 border: 1px #D4D4D5 solid;
 float: left;
 height: 100%;
 width: 12%;
}

#graph{
 grid-area: MAIN;
}

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin-top: 50px;
  padding: 0;
}

#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 30px 15px;
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}

#dropmenu li ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}

#dropmenu li {
  display: flex;
}

と書きました。

このコードを実行すると、名前or住所or職業をクリックした時、
例えば名前をクリックした場合なら

<li><a href="#">Tom</a></li>
<li><a href="#">Juddy</a></li>

が白い背景など無しに表示されます。

cssに

.dropitem{
 background-color:white;
 border: 1px #D4D4D5 solid;
 float: left;
 height: 100%;
 width: 12%;
}

を追加すると名前・住所・職業が崩れて表示されます。

Tom＆Juddyや、職業をクリックした時の、
ビジネスマンや金融＆医療＆製造の背景を白くしたいです。（#mainsectionのbackground-colorのように）
どのようにcssを追加すればいいでしょうか？

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

回答1件

ベストアンサー

色を変えたいだけなら、余計なプロパティをいじらずにbackground-colorだけ追加してみては。

css
1.dropitem{
2 background-color:white;
3}

投稿2018/06/21 09:11

ladybird

総合スコア163

kaitotokai

2018/06/21 09:23

ありがとうございます。

kaitotokai

2018/06/21 09:25

.dropitem ul{ background-color:white; width:15%; padding-left:40px; } .dropitem ul li ul{ background-color:white; width:15%; } と追加しましたが、意図した配置になりませんでした。子要素の背景と子要素は、親要素<ul id="dropmenu">　のぴったり右隣に並べたいのですが、その場合cssにはどのように追記すればいいでしょうか？

kaitotokai

2018/06/21 09:25

もしお分かりでしたらよろしくお願いいたします。

ladybird

2018/06/27 03:39 編集

返信が遅くなりましてすみません。回答にあたって再現してみたいので、HTMLの全体を載せていただくことは可能でしょうか？いま掲載いただいている範囲ですとドリルダウンをどのように実現しているのかが不明瞭で、正確に再現できないので、そのままでドリルダウンが再現できる形のものがあると助かります。もちろん全く関係ない要素や機密事項は伏せていただいて構いません。 <HTML> 　ヘッダ部　<body> 　　ドリルダウンの上位要素すべて　　　問題のドリルダウン　（その他影響のありそうな要素）　</body> </HTML> のような形を想定しています。質問本文を修正し通知いただければと思います。

kaitotokai

2018/07/01 14:16

ありがとうございます。別のcssが読み込まれていてできなかったようです。

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