Hello All,

I have the following code for my menu bar:

<style>
#nav ul {padding: 0; margin:;0; list-style-type:none;}
#nav li {display: inline;}
#nav li a {font-family: Arial;font-size:15px;text-decoration: none;float:left;padding: 12px;background-color: #FFFFFF;color: #0038A8; border-bottom:0px solid #000;}
#nav li a:hover {background-color: #BFCDE9; color: #FFFFFF; padding-bottom:12px; border-bottom:0px solid #000; margin:-1px;}
</style>


And call it:

<div id="main-nav">
<ul id="nav" style="clear:both;">
<li><a href="#">Home</a></li>
<li><a href="#">Access ot Information</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


I would like to do something like when sitting the mouse in top of the "Access to Information" tab others tab would show below horizontally not vertically.

Any idea how?

Thanks