The issue is in the sub-list inheriting the display inline and position attributes from the parent menu list and items.
One way to fix it is:
<pre lang="css">#menu {width: 100%;
height: 42px;
background: url(images/button_end_gradient.png) center left no-repeat;
position:relative;}
#menu ul {list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display:block;
left: 2px;
background: #6A7A86 url(images/menu_background.png) repeat-x;
color: #DCE0E4;
}
div#menu ul li {display:inline-block;
position:relative;
}
#menu ul li a {text-decoration: none;
height: 42px;
padding: 0 17px;
margin: 0;
line-height: 42px;
display: block;
float: left; !important;
background: url(images/button_end_gradient.png) center right no-repeat;
color: #D8DCE0;
font-size: 16px;
font-weight: bold;}
#menu ul ul {
position:absolute;
visibility:hidden;
top:42px;
}
#menu ul li:hover ul {
visibility:visible;
}
#menu ul li a:hover {background: url(images/button_end_gradient.png) center right no-repeat;
color: #FFF;}</pre>