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

Question

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

首先我<ul>在<li>标签中添加，然后添加 css 来隐藏嵌套<ul>，然后尝试<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>不需要的东西之后。你必须用 inprivacy policy标签来包装子菜单，而不是一个新的标签，这就是 css 没有按预期显示数据的原因之一，而你几乎就在那里，因为CSS我刚刚为你修复了它！希望能帮助到你。* {&nbsp; margin: 0;&nbsp; padding: 0;}nav {&nbsp; height: 30px;}nav ul {&nbsp; display: block;&nbsp; position: relative;&nbsp; z-index: 100;}nav ul li {&nbsp; float: left;&nbsp; list-style: none;&nbsp; margin: 0;&nbsp; padding: 0;}nav ul li ul {&nbsp; display: none;}nav ul li a {&nbsp; width: 100px;&nbsp; height: 30px;&nbsp; display: block;&nbsp; text-decoration: none;&nbsp; text-align: center;&nbsp; line-height: 30px;&nbsp; background-color: black;&nbsp; color: white;}nav ul li a:hover {&nbsp; background-color: red;}nav ul li:hover ul {&nbsp; position: absolute;&nbsp; top: 30px;&nbsp; display: block;&nbsp; width: 100px;}nav ul li:hover ul li {&nbsp; display: block;}<nav>&nbsp; <ul>&nbsp; &nbsp; <li> <a href="#">Home</a></li>&nbsp; &nbsp; <li> <a href="#">About Us</a></li>&nbsp; &nbsp; <li> <a href="#">Contact Us</a></li>&nbsp; &nbsp; <li> <a href="#">Privacy Policy</a>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Submenu 1</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Submenu 2</a></li>&nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Submenu 3</a></li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </li>&nbsp; </ul></nav>

Answer 2

&nbsp; *{&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}nav{&nbsp; &nbsp; background-color: red;}ul{&nbsp; &nbsp; background-color: purple;&nbsp; &nbsp; width: 50%;&nbsp;}nav ul li {&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp;}nav ul li a{&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color:black;font: bold 12px Arial;&nbsp; &nbsp; &nbsp;&nbsp;}nav ul li:hover{&nbsp; &nbsp; background-color: blue;&nbsp; &nbsp; color: red;}nav ul li:hover a{&nbsp; &nbsp; color: red;}ul li ul {&nbsp; &nbsp; display: none;&nbsp; &nbsp; position:absolute;}nav ul li:hover ul {&nbsp; &nbsp; display:block;}<nav><ul>&nbsp; &nbsp; <li> <a href="">Home</a></li>&nbsp; &nbsp; <li> <a href="">About Us</a></li>&nbsp; &nbsp; <li> <a href="">Contact Us</a></li>&nbsp; &nbsp; <li> <a href="">Privacy Policy</a></li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; <a href="">test</a>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="">Submenu 1</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="">Submenu 2</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="">Submenu 3</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="">Submenu 4</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</ul>

Answer 3

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

Answer 4

您必须在您创建的子导航中添加锚标记。因为当前这些子选项卡已创建，但未与任何超级选项卡关联。<a href="">Subnav</a>因此，请将其添加到您的子导航代码上方。你已准备好出发。