Question

我有这样的菜单结构：

<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;
}

Answer 1

HTML

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

CSS

.menu li > ul {
    display:none;
}

.menu li:hover > ul {
    display:block;
}

LIVE

Answer 2

这样的东西？ （不更改您的HTML）

CSS：

ul li ul {display:none;}
ul > li:hover ul{display:block;}
ul li ul > li > ul.sub-ul-2 {display:none;}
ul > li:hover ul > li:hover ul{display:block;}

<强> DEMO 1

更新：（不使用任何类＆amp; cursos：指针;）

ul li ul {display:none;}
ul > li:hover ul{display:block;}
ul > li > ul > li > ul > li{display:none;}
ul > li:hover ul > li:hover ul li{display:block;}

li{cursor:pointer;}  /* For the hand (cursor) while hover over the li */

DEMO 2

或短css，将第一个ul从<ul class"menu">修复为<ul class="menu"> （通过添加 = ）

.menu ul {display:none;}
.menu li:hover > ul{display:block;}
li{cursor:pointer;}

<强> DEMO 3

Answer 3

我整理了一个有效且简约的jsfiddle demo。

隐藏.menu内的所有UL。在悬停任何列表项时，您将显示任何直接后代UL。我使用display: block;和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;
}

Answer 4

小提琴：http://jsfiddle.net/Z22kH/

HTML：

<ul class="menu">
  <li>
    <a>item1</a>
    <ul class="sub-ul-1">
      <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>

的CSS：

ul.menu li{
 display: none;
}
ul.menu > li{
 display: block;
}
ul.menu > li:hover > ul > li,
ul.menu ul > li:hover > ul > li{
  display:block;
}

使用纯CSS和HTML创建菜单

4 个答案:

HTML

CSS