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

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。查看链接并阅读“重叠元素”http://www.w3schools.com/css/css_positioning.asp