CSS Drop Down Menu (IE makes me sad)

programming web dev
1

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

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

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