Question

当我将鼠标悬停在列表项上时，我无法显示子菜单。我做错了什么？

它使用display：none正确隐藏，但在我悬停时不会显示。

nav ul ul {display: none;}

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

完整代码：

<nav>
        <ul>

        <li><a href="#">link</a></li>
            <li><a href="#">link2</a></li>
                <ul>
                  <li><a href="#">SubMenu</a></li>
                </ul>

        </ul>
    </nav>

CSS：

/* start NAVBAR */
nav ul,li{
  display: flex;
  -webkit-justify-content: center;  
  -moz-justify-content: center;
  -ms-justify-content: center;  
  justify-content: center;

  list-style: none;
}

nav ul ul {display: none;}

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

nav ul {position: relative;}

nav ul li {
  position: relative;
  flex: 1;
  background-color: green;
}

nav ul li a{
  color: black;
  #background-color: pink;
  text-decoration: none;
  padding: 5px 10px 5px 10px;
}

nav ul li:hover{
  background-color: orange;
}

nav ul li ul {position: absolute; top:30px; left:0px;}

/* end NAVBAR */

Answer 1

问题是，在将子菜单放入其中之前，您已关闭了li元素。将结束</li>标记移至ul子菜单：

之后

<li><a href="#">link2</a>
    <ul>
        <li><a href="#">SubMenu</a></li>
    </ul>
</li>

为什么呢？因为您对nav ul li:hover > ul{display: block;}的CSS选择期望ul元素（您希望在悬停时显示）成为li元素的直接子。实际上，您的ul根本不是的孩子。

下拉菜单子菜单不显示

1 个答案: