IE6 position absolute bug

I am working on some html/js/css menus and I came across an IE bug that I am not sure how to fix. I only say that it seems like an IE bug because it seems to work fine in Firefox/Chrom/Safari. Here is the markup for my menu. <div id="menu"> <ul> <li> <a id="home" href="basic.html">Home</a> <div class="submenu"> products sub menu </div> </li> <li> <a id="about" href="#">About</a> <div class="submenu"> about sub menu </div> </li> <li> <a id="products" href="#">Products</a> <div class="submenu"> products sub menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div> And the css. body {font: normal 75% arial,verdana,tahoma,sans-serif;color: #777;background: #fff;} #menu {width: 600px;height:25px;background: #6699CC;clear: both;} #menu ul {margin: 0;padding:0;list-style:none;} #menu ul li {display:inline;} #menu ul li a {float: left;display: block;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 25px;color: #fff;text-decoration: none;margin: 0;padding: 0 10px;} #menu ul li a:hover, #menu ul li a.active {color: #6699cc;text-decoration: none;background: #fff;} .submenu {position:absolute;width:560px;height:240px;margin:25px 0 0 0;padding:20px;background:#333;z-index:100;color:#fff;}

In Chrome


In IE6

I am sure there is probably some hack to fix this I just don't know what I am looking for. If anyone can help me figure this one out that would be great.

** UPDATE
Bradley Moore was able to help me out with this one. Here is the updated css. body {font: normal 75% arial,verdana,tahoma,sans-serif;color: #777;background: #fff;} #menu {position:relative;width:600px;height:25px;background:#6699CC;clear:both;} #menu ul {margin: 0;padding:0;list-style:none;} #menu ul li {display:inline;} #menu ul li a {float: left;display: block;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 25px;color: #fff;text-decoration: none;margin: 0;padding: 0 10px;} #menu ul li a:hover, #menu ul li a.active {color: #6699cc;text-decoration: none;background: #fff;} .submenu {position:absolute;top:0;left:0;width:560px;height:240px;margin:25px 0 0 0;padding:20px;background:#333;z-index:100;color:#fff;}

This entry was posted on February 12, 2010 at 3:07 PM and has received 4939 views. Comments 1 | Print this entry.