Question

使用子菜单创建简单导航。每当我将鼠标悬停在显示ul的{{1}}上时，子菜单始终为display: block。

现在：悬停功能无效。

这是我试图显示display:none的地方。 我的选择器错了吗？不确定。

ul

任何想法有什么不对？也是我的css干净还是可以更短？

完整的HTML

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

CSS

<!DOCTYPE html>
<html>
<head>
    <title>
        nav
    </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <nav>
            <div class="main-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </div>
                <ul class="items">
                    <li><a href="#">items</a></li>
                    <li><a href="#">items</a></li>
                        <ul class="sub-items">
                            <li><a href="#">subs</a></li>
                            <li><a href="#">subs</a></li>
                            <li><a href="#">subs 3</a></li>
                        </ul>
                    <div class="items-after-sub-list">
                        <li><a href="#">items</a></li>
                        <li><a href="#">items</a></li>                  
                    </div>      

                </ul>           
        </nav>
    </header>

</body>
</html>

Answer 1

您的选择器nav > li:hover > ul确实是错误的，原因有两个：

首先，这是错误的，因为<ul>元素中没有任何<li>个元素。您有一个子菜单，但它是另一个<ul>元素的直接子菜单。
其次，这是错误的，因为永远不会等同于有效标记。 <li>元素必须拥有<ul>，<ol>或<menu>父级。使用<div>作为父级是 obsolete 。

除此之外，你的结构也是错误的; “联系人”位于div.main-nav，因此无法在没有JavaScript的情况下访问该下拉列表（因为CSS具有 no parent selector ）。

我会通过改变你的HTML结构来推荐纯CSS解决方案，而不是使用JavaScript。应将每个“级别”包含为HTML中父级的子级。在我的例子中，我已经表示一个元素具有.more类的子元素。

首先，您需要隐藏所有子菜单项，同时显示'root'元素（可以通过子选择器>实现）：

#collapse li {
  display: none;
}

#collapse > li {
  display: block;
}

然后您可以使用以下内容显示下一级别的孩子：

#collapse li.more:hover > ul > li {
  display: block;
}

由于子选择器的双重使用，这只会选择下一个级别。话虽如此，因为在#collapse和li.more之间没有子选择器，它会在li.more下点击每个 #collapse元素，允许无限期递归。

可以看到以下最小例子：

#collapse .more {
  list-style: none;
  cursor: pointer;
  text-indent: -1em;
}

#collapse .more:before {
  content: "+";
  padding-right: 5px;
}

#collapse .more ul {
  text-indent: 0em;
  cursor: initial;
}

#collapse li {
  display: none;
}

#collapse > li {
  display: block;
}

#collapse li.more:hover > ul > li {
  display: block;
}

<ul id="collapse">
  <li>Top-level without children</li>
  <li class="more">Top-level with children
    <ul>
      <li>Sub-level without children</li>
      <li class="more">Sub-level with children
        <ul>
          <li>Child 1</li>
          <li>Child 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

将鼠标悬停在.more元素上会显示直接子女，而仅直接子女。

希望这有帮助！：）

简单的子菜单导航不起作用？

1 个答案: