How to make vertical css drop down menu into horizontal?

programming web dev
1

Hi,

I have had a look at a lot of css drop down menus today, and the best one I found seems to be the one published on a list apart, found here:
http://www.alistapart.com/articles/horizdropdowns/

my problem is that even though it says its a horizontal drop down menu, its not really. The main menu buttons sit below each other, and the submenu items fly out to the left.

What I need to do is convert this so that the main menu items sit next to each other (side by side), and the submenu items appear below.

I could just simply use one thats already like this, but this particular menu is very simple and easy to modify.

Do I need to change the way the html list is organised, or is it all in the css?

Ive attached the files in a zip if anyone wants to play with it.

Here is the list:

<ul id=“nav”>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>About</a>
<ul>
<li><a href=“#”>History</a></li>
<li><a href=“#”>Team</a></li>
<li><a href=“#”>Offices</a></li>
</ul>
</li>
<li><a href=“#”>Services</a>
<ul>
<li><a href=“#”>Web Design</a></li>
<li><a href=“#”>Internet Marketing</a></li>
<li><a href=“#”>Hosting</a></li>
<li><a href=“#”>Domain Names</a></li>
<li><a href=“#”>Broadband</a></li>
</ul>
</li>
<li><a href=“#”>Contact Us</a>
<ul>
<li><a href=“#”>United Kingdom</a></li>
<li><a href=“#”>France</a></li>
<li><a href=“#”>USA</a></li>
<li><a href=“#”>Australia</a></li>
</ul>
</li>
</ul>

Here is the css:

body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 119px; /* Set 1px less than menu width /
top: 0;
display: none;
}
/ Styles for Menu Items /
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; / IE6 Bug /
padding: 5px;
border: 1px solid #ccc; / IE6 Bug */
border-bottom: 0;
}

/* Holly Hack. IE Requirement */

  • html ul li { float: left; height: 1%; }
  • html ul li a { height: 1%; }
    /* End /
    li:hover ul, li.over ul { display: block; } /     The magic */