Navigational drop-down menu cuts off when selected - html

Question

I have a drop down menu that cuts of whenever it is selected like the image shown below:
There should be a longer list than just 'watch in flash' but it seems to cut off, why is this?
HTML:
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></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> Javascript </li>
<li> <a href = "#" > jQuery </a> </li>
<li> HTML </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;
}
Can anybody work out this problem?
Thanks

Answer 1

Add
ul.menu li:hover ul { display:block; }
and remove from
#top_bar { overflow: hidden; }
jsfiddle