Question

我正在使用顶部的水平栏导航，应该将其与下拉菜单配对。这是我的html＆css代码：

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow:hidden;
   background-color: #333;
   position: sticky;
   top: 0;
   width: auto;
}

li {
   float: left;
   border-right: 1px solid #bbb;
}

li:last-child {
   border-right: none;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding:14px 16px;
   text-decoration: none;
}

li a:hover {
   background-color: #111;
}

.active {
   background-color:#4CAF50
}

.right {
   float: right;
}

.subcontent {
  display: none;
  border: 1px solid #bbb;
}

.submenu:hover .subcontent {
  display: block;
}

 <ul>
    <li><a href="Home.html">HOME</a></li>
    <li><a href="Search.html">FIND YOUR PLACE</a></li>
    <li><a href="AboutUs.html">ABOUT US</a></li>
    <li class="right"><a href="Login.html">Login</a></li>
    <li class="right submenu"><a href="Register.html" class="active">Register</a>
        <ul class="subcontent">	
            <li><a href="RegisterCompany.html">Company</a></li>
            <li><a href="RegisterStudent.html" class="active">Student</a></li>
        </ul>
     </li>
</ul>

但是，当鼠标悬停在“寄存器”上时，黑色背景也会增加。我尝试使用位置（相对和绝对），但是没有用。还有其他解决方案吗？

Answer 1

您想要的可能是这样的吗？从overflow: hidden;中删除ul，然后在li中将float: left;替换为display: inline-block;

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   /*overflow: hidden;*/
   background-color: #333;
   position: sticky;
   top: 0;
   width: auto;
}

li {
   /*float: left;*/
   display: inline-block;
   border-right: 1px solid #bbb;
}

li:last-child {
   border-right: none;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding:14px 16px;
   text-decoration: none;
}

li a:hover {
   background-color: #111;
}

.active {
   background-color:#4CAF50
}

.right {
   float: right;
}

.subcontent {
    display: none;
    border: 1px solid #bbb;
}

.submenu:hover .subcontent {
    display: block;
}

<ul>
    <li><a href="Home.html">HOME</a></li>
    <li><a href="Search.html">FIND YOUR PLACE</a></li>
    <li><a href="AboutUs.html">ABOUT US</a></li>
    <li class="right"><a href="Login.html">Login</a></li>
    <li class="right submenu"><a href="Register.html" class="active">Register</a>
        <ul class="subcontent"> 
            <li><a href="RegisterCompany.html">Company</a></li>
            <li><a href="RegisterStudent.html" class="active">Student</a></li>
        </ul>
     </li>
</ul>

有关带有html + css的下拉菜单的问题

1 个答案: