html - 使用纯 CSS 和 HTML 创建菜单

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

居住

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

演示 1

---

更新：（不使用任何类和游标：指针；）

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 */

演示 2

---

或者简短的 css，在将第一个 ul 从固定<ul class"menu">到之后<ul class="menu"> （通过添加=到它）

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

演示 3

Answer 3

我已经整理了一个工作和简约的jsfiddle 演示。

你把所有的 UL 都藏在里面.menu。在悬停任何列表项时，您会显示任何直接后代 UL。我使用display: block;anddisplay: 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;
}