5

私はこのようなメニュー構造を持っています:

<ul class"menu">
  <li>
    <a>item1</a>
    <ul>
      <li><a>subitem1</a></li>
      <li><a>subitem2</a></li>
      <li><a>subitem3</a></li>
      <li><a>subitem4</a></li>
      <li>
        <a>item2</a>
        <ul class="sub-ul-2">
          <li><a>subitem5</a></li>
          <li><a>subitem6</a></li>
          <li><a>subitem7</a></li>
          <li><a>subitem8</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

私の要件は、 item1にカーソルを合わせると、 subitem1、subitem2、subitem3、subitem4のみを表示する必要があり、subitem5 - 8は表示する必要がないことです。

item2にカーソルを合わせると、subitem5 - 8 のみを表示する必要があります。cssを使用してこれを達成するにはどうすればよいですか?

私が試してみました：

ul.menu ul{
 display: none;
}
ul.menu li:hover:first-child ul {
  display:block;
}
4

4 に答える 4

3

実用的で最小限のjsfiddle demoをまとめました。

すべての UL を内部に隠します.menu。リスト項目にカーソルを合わせると、直下の UL が表示されます。シンプルにするためにdisplay: block;andを使用します。display: none;

CSS:

/* Hide all UL's inside .menu */
.menu ul {
    display: none;
}

/* Show any UL which is a direct child of a hovered list-item */
.menu li:hover > ul {
    display: block;
}
于 2013-12-12T18:34:41.033 に答える