将鼠标移动到 ul li 标签但悬停不起作用

Question

我有这样的代码，当我将鼠标移动到<ul> <li>标签时，我希望悬停工作会下拉<ul>标签：

 body { background: hotpink; } .menu>ul>li { display: inline-block; position: relative; } .menu>ul>li>a { display: inline-block; text-decoration: none; font-variant: small-caps; font-size: larger; color: white; padding: 0 10px; line-height: 40px; } .menu>li>a:hover { color: yellow; } .menu>ul ul { position: absolute; display: none; padding: 0px; margin: 0px; list-style: none; border-radius: 3px; width: 200px; background-color: lightgray; box-shadow: 0 0 2px green; } .menu>ul li:hover>ul { display: block; } .menu>ul li:hover>ul { display: block; }

 <nav class="menu"> <ul> <li><a href="home.html" target="self">Trang chủ</a></li> <li><a href="gioithieu.html" target="noidung">Giới thiệu</a></li> <ul> <li><a href="gioithieuchung.html">Giới thiệu chung</a></li> <li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li> </ul> <li><a href="tintuc.html" target="noidung">Tin tức</a></li> <li><a href="lienhe.html" target="noidung">Liên hệ</a></li> <li><a href="hoidap.html" target="noidung">Hỏi đáp</a></li> </ul> </nav>

我希望当我移动到 gioithieu.html 时，它会显示下面的ul 。 我有这个，但它不起作用。 请帮我。 提前致谢。

Answer 1

将 HTML 更改为：

<li><a href="gioithieu.html" target="noidung">Giới thiệu</a>
   <ul>
      <li><a href="gioithieuchung.html">Giới thiệu chung</a></li>
      <li><a href="cocautochuc.html">Cơ cấu tổ chức</a></li>
   </ul>
</li>

由于使用了 >，您的选择器暗示 ul（下拉菜单）是 li 的直接子级，但它是一个兄弟级，因此它不会工作。 有了这个片段，ul 现在将成为它的孩子。

此外，将 ul 放入 ul 中不是有效的 HTML，这样它是有效的。