CSS 鼠标超出 div 高度时导航栏子菜单关闭

Question

我第一次制作带有子菜单的导航栏。问题是导航栏有一个它应该占据的设定高度。但是子菜单的唯一工作方式是 height: auto;将内容向下移动到屏幕

CSS

#topnav
{
position: relative;
padding: 0px;
margin: 0px;
width: 900px;
height: 23px;
top: -30px;
left: 0px;
}
#topnav nav ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
#topnav nav li
{
float: left;
display: inline;
padding-left: 1px;
}
#topnav nav ul li
{
width: 149px;
}
#topnav a
{
display: block;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#EEF0F7');/*IE */
background: -webkit-linear-gradient(#FFFFFF, #EEF0F7);/*Chrome 11+ and Safari 5.1 to 6.0 */
background: -o-linear-gradient(#FFFFFF, #EEF0F7);/*Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, #EEF0F7);/*Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, #EEF0F7);/*standard syntax */
border-bottom: 1px solid #2a4982;
border-right: 1px solid #2a4982;
text-align: center;
text-decoration: none;
font: bold 12px arial, helvetica, sans-serif;
letter-spacing: 1px;
color: #2a4982;
padding: 4px;
}
#topnav a:hover, a:active
{
background: #DCE2F1;
}
#topnav nav ul ul
{
display: block;
height: 0;
}
#topnav nav ul li:hover > ul
{
display: block;
height: auto;
}
#topnav nav ul ul a
{
font: 12px arial, helvetica, sans-serif;
padding: 2px;
}

编辑：HTML 让一些人开心

摘自index.php

...
<div id="topnav">
     <?php require('lib/public/theme/ivaoca_pre2015/navigation/topnav.php');?>
</div>

topnav.php

<nav>
     <ul>
          <li><a href="#">Home</a>
               <ul>
                    <li><a href="#">test</a></li>
               <ul>
          </li>
     </ul>
</nav>

Answer 1

添加 z-index:1;到#topnav。请参阅 link 并阅读 "overlapping elements" http://www.w3schools.com/css/css_positioning.asp

CSS 鼠标超出 div 高度时导航栏子菜单关闭

CSS navbar submenu closes when mouse outside of div height

html

css

navigation

navbar