javascript - 当我将鼠标悬停在“产品”菜单上时，此代码需要进行哪些更改以提供正确的外观？

Question

当我将鼠标悬停在导航栏中的产品菜单上时，产品菜单的列表项位置不正确。它显示大块。请帮我。

当我将鼠标悬停在“产品”菜单上时，此代码需要进行哪些更改以提供正确的外观？

CSS 代码:

 #nav_barhorizontal{
    width:500px;
    margin:auto;
}

#nav_barhorizontal ul{
overflow: hidden;
padding: 0;
list-style-type: none;
background-color: #333;
}

#nav_barhorizontal ul li{
float: left;
text-align: center;
width: 120px;
margin: 0px;
}

#nav_barhorizontal ul li a{
color:  white;
text-align: center;
padding: 14px;
display:block;
font-family : Calibri;
text-decoration: none;
}

li a:hover:not(.active)  {
background-color: #111;
}

.active {
background-color: #4CAF50;
margin-left:0px;
}

#nav_barhorizontal ul ul
{
    display:none;
}

 #nav_barhorizontal ul li:hover ul
{
   text-decoration: none;
      display: block;
     text-align: left;
}

body 部分编码:

<div id="nav_barhorizontal">
         <ul>
          <li><a class="active" href="#home">Home</a></li>
          <li><a href="">Contact</a></li>
              <li>
            <a href="">Products</a>
              <ul>
                  <li><a href="">Temp1</a></li>
                  <li><a href="">Temp2</a></li>
                  <li><a href="">Temp3</a></li>
              </ul>
          </li> 
          <li><a href="">About</a></li>
        </ul>
     </div>

谢谢..

Answer 1

问题是由于在顶级 ul 上设置了 background-color 引起的。子菜单是父级 ul 的后代，所以当它显示时，父级 ul 的高度增加，背景颜色向下延伸到底部。

移动规则

background-color: #333;

来自选择器

#nav_barhorizontal ul

选择器

#nav_barhorizontal ul li

似乎解决了这个问题。这是新的 CSS:

#nav_barhorizontal{
    width:500px;
    margin:auto;
}

#nav_barhorizontal ul{
overflow: hidden;
padding: 0;
list-style-type: none;
}

#nav_barhorizontal ul li{
float: left;
text-align: center;
width: 120px;
margin: 0px;
background-color: #333;
}

#nav_barhorizontal ul li a{
color:  white;
text-align: center;
padding: 14px;
display:block;
font-family : Calibri;
text-decoration: none;
}

li a:hover:not(.active)  {
background-color: #111;
}

.active {
background-color: #4CAF50;
margin-left:0px;
}

#nav_barhorizontal ul ul
{
    display:none;
}

 #nav_barhorizontal ul li:hover ul
{
   text-decoration: none;
      display: block;
     text-align: left;
}