使用纯 CSS 和 HTML 创建菜单答案

【问题标题】：Create a menu using pure css and HTML使用纯 CSS 和 HTML 创建菜单
【发布时间】：2013-10-14 05:45:33
【问题描述】：

我有一个这样的菜单结构：

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

【问题讨论】：

我可能是错的，但我认为你需要一些 jQuery 才能获得你想要的结果。
您在class"menu" 中缺少=。此外，您可能忘记在第二个 ul 中添加 class="sub-ul-1"。

标签： html css menu

【解决方案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

【讨论】：

【解决方案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

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

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

【讨论】：

【解决方案3】：

小提琴：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;
}

【讨论】：

【解决方案4】：

我整理了一个实用且简约的jsfiddle demo。

您将所有 UL 隐藏在 .menu 中。在悬停任何列表项时，您会显示任何直接后代 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;
}

【讨论】：