为什么我的子菜单在 html css 中不起作用

Question

我已经创建了我的导航栏，它工作正常，但现在我尝试在我的导航栏中添加子菜单，但它在悬停时不显示子菜单。 请检查并纠正我。

首先我在我的<li>标签中添加了<ul>然后我添加了 css 来隐藏嵌套的<ul>然后我尝试在悬停<li>上显示<ul> <li>

 *{ margin: 0; padding: 0; } nav{ background-color: red; } ul{ background-color: purple; width: 50%; } nav ul li { list-style: none; padding: 5px; display: inline-block; } nav ul li a{ text-decoration: none; color:black; font: bold 12px Arial; } nav ul li:hover{ background-color: blue; color: red; } nav ul li:hover a{ color: red; } ul li ul { display: none; position:absolute; } nav ul li:hover ul { display:block; }

 <nav> <ul> <li> <a href="">Home</a></li> <li> <a href="">About Us</a></li> <li> <a href="">Contact Us</a></li> <li> <a href="">Privacy Policy</a></li> <li> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul> </nav>

Answer 1

看起来您的<li>包装不正确！

这是小提琴

在Privacy Policy您创建了另一个不需要的<li> 。 你必须用privacy policy标签包装子菜单，而不是一个新标签，这就是为什么 css 没有按预期显示数据的原因之一，你几乎就在那里关于CSS我刚刚为你修复了它！ 希望能帮助到你。

 * { margin: 0; padding: 0; } nav { height: 30px; } nav ul { display: block; position: relative; z-index: 100; } nav ul li { float: left; list-style: none; margin: 0; padding: 0; } nav ul li ul { display: none; } nav ul li a { width: 100px; height: 30px; display: block; text-decoration: none; text-align: center; line-height: 30px; background-color: black; color: white; } nav ul li a:hover { background-color: red; } nav ul li:hover ul { position: absolute; top: 30px; display: block; width: 100px; } nav ul li:hover ul li { display: block; }

 <nav> <ul> <li> <a href="#">Home</a></li> <li> <a href="#">About Us</a></li> <li> <a href="#">Contact Us</a></li> <li> <a href="#">Privacy Policy</a> <ul> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> </ul> </li> </ul> </nav>

Answer 2

为什么不从这个工作片段开始并尝试根据您的需要更改数据:)

HTML 子导航

Answer 3

 *{ margin: 0; padding: 0; } nav{ background-color: red; } ul{ background-color: purple; width: 50%; } nav ul li { list-style: none; padding: 5px; display: inline-block; } nav ul li a{ text-decoration: none; color:black; font: bold 12px Arial; } nav ul li:hover{ background-color: blue; color: red; } nav ul li:hover a{ color: red; } ul li ul { display: none; position:absolute; } nav ul li:hover ul { display:block; }

 <nav> <ul> <li> <a href="">Home</a></li> <li> <a href="">About Us</a></li> <li> <a href="">Contact Us</a></li> <li> <a href="">Privacy Policy</a></li> <li> <a href="">test</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul>

Answer 4

您必须在您创建的子导航中添加一个锚标记。 因为目前这些子选项卡已创建但不与任何超级选项卡相关联。

<a href="">Subnav</a>

因此，将其添加到您的子导航代码上方。 你已准备好出发。