# How to make vertical css drop down menu into horizontal?

**URL:** <https://forum.kirupa.com/t/how-to-make-vertical-css-drop-down-menu-into-horizontal/201572>\
**Category:** web dev\
**Created:** [September 22, 2006, 3:39pm UTC](https://forum.kirupa.com/t/how-to-make-vertical-css-drop-down-menu-into-horizontal/201572 "2006-09-22T15:39:25Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![gilly](https://avatars.discourse-cdn.com/v4/letter/g/ecc23a/32.png) [@gilly](https://forum.kirupa.com/u/gilly)\
**Post date:** [September 22, 2006, 3:39pm UTC](https://forum.kirupa.com/t/how-to-make-vertical-css-drop-down-menu-into-horizontal/201572/1 "2006-09-22T15:39:25Z")

</div>

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/](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 \*/