html - div の色の変更 - HTML

Question

リストで構成されたサブメニューのあるドロップダウンメニューがあります。

<ul>
   <li class="list_item">Item 1</li>
   <li class="list_item">Item 2</li>
      <ul>
         <li class="sub_list_item">Sub Item 1</li>
         <li class="sub_list_item">Sub Item 2</li>
      </ul>
   <li class="list_item">Item 3</li>
</ul>

カーソルを合わせると、CSS がbackground-colorこれらの項目の を変更します。私がやりたいのはItem 2、任意のギブの上にカーソルを置いている間、の背景色を変更したままにすることですSub Item

これを行う簡単な方法はありますか？

CSS:

.list_item:hover {
    background-color:green;
}
.sub_list_item:hover {
    background-color:yellow;
}

Answer 1

アイテム 2 をその<ul>タグに巻き付ける

<ul>
   <li class="list_item">Item 1</li>
   <li class="list_item">Item 2
      <ul>
         <li class="sub_list_item">Sub Item 1</li>
         <li class="sub_list_item">Sub Item 2</li>
      </ul>
   </li>
   <li class="list_item">Item 3</li>
</ul>

Answer 2

直接の子セレクターを使用して、特定のorではなく>特定のものをターゲットにすることができます。liliul

jsFiddle here - 数週間前に作成したメニュー

使用例:

#menu > ul > li:hover {
    background: #2580a2;
}

Answer 3

コードとcssを変更する

<ul class="item">
    <li class="list_item">Item 1</li>
    <li class="list_item">Item 2</li>
    <ul>
        <li class="sub_list_item">Sub Item 1</li>
        <li class="sub_list_item">Sub Item 2</li>
    </ul>
    <li class="list_item">Item 3</li>
</ul>

CSSは

.item
{
    color: #000000;
    list-style-type: disc;
}

.item li:hover
{
    color: #FFFFFF;
    background-color: #336600;
}

.item ul li:hover
{
    color: #FFFFFF;
    background-color: #FF0000;
}

楽しんで...そして好きな色を選んでください

詳細については、 http: //www.mr-sudhir.com/blog/what-is-css.aspx をご覧ください。