css dropdown menu glitch - css

Question

i recently changed the design of this webpage but now my dropdown menu lists the "hidden" items vertically instead of horizontally even though i use the inline-block display option.
this is the html code from my menu:
<ul id="menu">
<li id="bordered">News</li>
<li id="bordered">About</li>
<li id="bordered">Research </li>
<li id="bordered">Artists
<ul>
<li id="bordered">1234 1234</li>
<li id="bordered">1234 1234</li>
</ul></li>
<li>Municipalities
<ul>
<li id="bordered">1234567</li>
<li id="bordered">1234 </li>
</ul></li>
<li>
<form id="searchbox" action=" " method=" ">
<input type="text" name="search" value="" />
<input type="submit" value="Search" />
</form>
</li>
</ul>
and this is the CSS:
/*header navigation menu*/
/*STYLING*/
#menu{
margin-top:2px;
font-size:0.8em;
list-style:none;
}
#menu li{
padding:1% 1.5% 1% 1.5%;
display:inline-block;
text-align:center;
vertical-align:middle;
}
#menu li a{
text-align:center;
vertical-align:middle;
font-weight:bold;
}
#bordered{
border-right:1px dotted #f9f9f3;
}
/*DROPDOWN*/
#menu li ul{
visibility:hidden;
position:absolute;
margin:1% 0 0 -2px;
border-top: 1px dotted #f9f9f3;
}
#menu li ul li{
float:left;
white-space:nowrap;
}
#menu li:hover ul, #menu li:active ul{
visibility:visible;
}
help would be very much appreciated :)

Answer 1

You should apply a float:left on #menu li instead of a display:inline-block
It fixes your problem, and it will work on IE7, when inline-block won't.
Also be careful with your bordered IDs. You should use classes.
Demo : JSFiddle

Answer 2

Try giving the #menu li ul a larger width:
#menu li ul{
visibility:hidden;
position:absolute;
border-top: 1px dotted #f9f9f3;
width: 10em;
}
and remove margin:1% 0 0 -2px;