html - 下拉菜单子(monad)菜单不显示

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>

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