css - 子菜单项重叠

Question

我的导航如下....

<div id="topnav">
  <ul>
  <li class="active"><a class="" href="#">About Us</a>
        <ul>
            <li><a href="link">About Our College</a></li>
            <li><a href="link">From Chairman's Desk</a></li>
            <li class="last"><a href="link">Governing Body</a></li>
        </ul>   
      </li>
      <li class=""><a class="" href="#">Admission</a>
        <ul>
            <li><a href="link">Admission Procedure</a></li>
            <li class="last"><a href="link">Fees Structure</a></li>
        </ul>
      </li>
  </ul>
</div>

和CSS如下

#topnav{height:75px; overflow:hidden;}
#topnav ul{display:block; width:100%; height:75px; margin:0; padding:0; list-style:none;}
#topnav ul li ul{display:none;}
#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}
#topnav li{display:block; float:left;}
#topnav li.last{margin-right:0;}
#topnav ul li a:link, #topnav ul li a:visited, #topnav ul li a:hover{display:block; float:left; height:25px; padding:10px 15px 0 15px; color:#333333; background-color:#E5E2C9;}
#topnav ul ul li a:link, #topnav ul ul li a:visited, #topnav ul ul li a:hover{float:left; height:auto; margin:13px 15px 0 0; padding:0 16px 0 0; color:#FFFFFF; background-color:#591434; border-right:1px solid #FFFFFF;}
#topnav ul ul li.last a{margin-right:0; padding:0; border-right:none;}
#topnav ul li.active a, #topnav ul li a:hover{color:#FFFFFF; background-color:#591434;}
#topnav ul li:hover > a {background-color:#591434;color:#ffffff;}
#topnav ul li:hover ul {display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}

问题是，当我将鼠标悬停在父项上时，它会显示上一项的子菜单。喜欢

我删除了 .active 类，即

#topnav ul li.active ul{display:block; position:absolute; top:35px; left:0; width:100%; height:40px;}

但是然后菜单不显示子菜单项并显示为

我该怎么办？

更新

我已经更正了我的 html 代码。所有 li 都位于 ul 下。

Answer 1

只需添加 background-color (这个棕色)给你的 child <ul> .
目前它没有 background-color这就是为什么您可以通过它看到下面的元素。

#topnav ul li.active ul{
  display:block; 
  position:absolute; 
  top:35px; left:0; 
  width:100%; 
  height:40px;
  background-color: #591434;
}