选择时，导航下拉菜单会中断

Question

我有一个下拉菜单，无论何时选择它，如下图所示：

应该有一个更长的清单，而不仅仅是'在闪光灯中观看'，但它似乎被切断了，为什么会这样？

HTML：

<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div>
<div class="nav">
<ul class = "menu" >
            <li> <a href = "#" > Home </a> </li>
            <li><a href = "#" > Tutorials </a>
        <ul class = "submenu" >
            <li> <a href = "#" > CSS </a> </li>
            <li> <a href = "#"> Javascript </a> </li>
            <li> <a href = "#" > jQuery </a> </li>
            <li> <a href = "#"> HTML </a> </li>
            <li> <a href = "#" > PHP </a> </li>
        </ul>
        </li>

        <li><a href = "#" > Code </a>
        <ul class = "submenu" >
        <li> <a href = "#" > Watch in Flash </a> </li>
        <li> <a href = "#" > Date with JS </a> </li>
        <li> <a href = "#" > XML AS </a> </li>
        <li> <a href = "#" > RSS and PHP </a> </li>
        <li> <a href = "#" > ASP to Excel </a> </li>
        <li> <a href = "#" > PHP to Excel </a > </li>
        </ul>
        </li>

        <li> <a href = "#" > About Us </a> </li>
        <li> <a href = "#" > Privacy </a> </li>
        <li> <a href = "#" > RSS </a> </li>
        <li> <a href = "#" > Contact </a> </li>
        </ul>
    </div>
</div>

<div></div>
</body>
</html>

CSS：

#top_bar {
width: 100%;
height: 145px;
background: #000000;
overflow: hidden;
}

#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}

#logo {
float: left;
padding-top: 20px;
padding-right: 82px;
}



body {
margin: 0; padding: 0;
font: 12px normal Arial, Helvetica, sans-serif;
background: #FFF url(../images/body_bg.gif) repeat-x;
}

.nav {
margin: 0 auto;
position: relative;
padding-top: 85px;
}

ul.menu {
list-style: none;
padding: 0 15px;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}

ul.menu li {
float: left;
margin: 0;  
padding: 0 15px 0 0;
position: relative; 
}

ul.menu li a{
padding: 10px 15px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}

ul.menu li a:hover{
background: url(../images/topnav_hover.gif) no-repeat center top;
}

ul.menu li span { 
width: 17px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}

ul.menu li span.subhover {background-position: center bottom; cursor: pointer;} 

ul.menu li ul.submenu {
list-style: none;
position: absolute; 
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}

ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525; 
border-bottom: 1px solid #444; 
clear: both;
width: 170px;
}

ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(../images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}

ul.menu li ul.submenu li a:hover { 
background: #222 url(../images/dropdown_linkbg.gif) no-repeat 10px center; 
}

有人可以解决这个问题吗？

由于

Answer 1

添加

ul.menu li:hover ul { display:block; }

并从

中删除

#top_bar { overflow: hidden; }

jsfiddle