为什么我的子菜单在 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我刚刚为你修复了它！希望能帮助到你。

* {

  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

  *{

    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 3

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

HTML 子导航

Answer 4

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

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

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