# CSS Drop Down Menu (IE makes me sad)

**URL:** https://forum.kirupa.com/t/css-drop-down-menu-ie-makes-me-sad/196791
**Category:** web dev
**Created:** [August 11, 2006, 12:35am UTC](https://forum.kirupa.com/t/css-drop-down-menu-ie-makes-me-sad/196791 "2006-08-11T00:35:17Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![wayniep00p](https://avatars.discourse-cdn.com/v4/letter/w/839c29/32.png) [@wayniep00p](https://forum.kirupa.com/u/wayniep00p)
#### Post date: [August 11, 2006, 12:35am UTC](https://forum.kirupa.com/t/css-drop-down-menu-ie-makes-me-sad/196791/1 "2006-08-11T00:35:17Z")

</div>

Hello guys. I am all out of ideas on this one so I was wondering whether you guys can give me a hand. I am working on a CSS based navigation bar with a drop down menu. It works perfectly in Firefox but it’s been a pain to get it working the same in IE. It appears that the list refuses to follow “float:left” in IE for some curious reasons.

Work Site Link: [http://pellam.ucr.edu/~wfan/busanutenterprises/demoindex.html](http://pellam.ucr.edu/%7Ewfan/busanutenterprises/demoindex.html)

This is the CSS involved in the navigation:

[COLOR=Gray] /\* CSS Nav \*/  
ul {  
font: Helvetica, Arial, sans-serif;  
font-size:14px;  
margin: 5px 0px 50px 0px;  
padding: 0px;  
list-style:none;  
width: 800px;  
display:table;  
}

ul li {  
position: relative;  
float:left;  
margin: 0px 5px 0px 0px;  
}

li ul {  
position: absolute;  
left: 0px;  
top: 20px;  
display: none;  
float:left;  
}

.nav\_sub {  
font-size:10px;  
letter-spacing:0.5px;  
padding-top: 0px;  
float:left;

```
}

```

ul li a {  
display: block;  
text-decoration: none;  
color: #777;  
padding: 5px;  
}

ul li a:hover {  
color: #793236;  
}

- html ul li { float: left; height: 1%; }
- html ul li a { height: 1%; }

li:hover ul, li.over ul { display: block; }

.nav\_active {  
color: #793236;  
}  
/\* CSS Nav \*/  
[/COLOR]  
HTML itself:

[COLOR=Gray] \<ul id=“nav”\>  
\<li\>\<a href="#"\>EXPRESSIONS IN WOOD\</a\>  
\<ul\>  
\<li class=“nav\_sub”\>\<a href=“spaceprogram/flash.html”\>SPACE PROGRAM\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“beautiful/flash.html”\>BEAUTIFUL DISCOVERIES\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“agent/flash.html”\>AGENT MALLAD\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“noble/flash.html”\>NOBLE WARRIORS\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“wwjd/flash.html”\>WWJD/DJWW\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“rec/flash.html”\>REC ROOM\</a\>\</li\>  
\<li class=“nav\_sub”\>\<a href=“all/flash.html”\>VIEWALL\</a\>\</li\>  
\</ul\>  
\</li\>  
\<li\>\<a href=“music.html”\>MUSIC\</a\>\</li\>  
\<li\>\<a href=“story.html”\>STORY\</a\>\</li\>  
\<li\>\<a href=“book.html”\>GET THE BOOK \</a\>\</li\>  
\<li\>\<a href=“contact.html”\>CONTACT\</a\>\</li\>

\<li\>\<a href=“tentopia.html”\>TENTOPIA\</a\>\</li\>  
\</ul\>  
[/COLOR]  
The Javascript involved to make the drop down menu work in IE: [http://pellam.ucr.edu/~wfan/busanutenterprises/drop\_down.js](http://pellam.ucr.edu/%7Ewfan/busanutenterprises/drop_down.js)

Thanks ahead of the time guys. IE should be banned as a browser that it’s so frustrating to work with. =(