IE6 doesn't respect width: 100% inside an absolute box

[bpw89]

I am trying to modify a basic horizontal CSS drop down menu (found at

http://www.cssnewbie.com/horizontal-dropdown-menus/)

to match the color scheme of the website I'm developing.

The problem is in IE6, where the second layer of the menu stretches outside of its container, even though it is set with width: 100%. Here a live demo (view in IE7,8, or FF to see desired behavior):

http://www.911-inc.com/menu_test/

Also, the relevant code is below:

Does anyone know what causes this or how I can fix it? Thanks!

<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Exhibits and Events</a>
<ul>
<li><a href="#">Current Exhibit</a></li>
<li><a href="#">Coming Exhibit</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>
..Etcetera...
</ul>

#navbar {
float:right;
position: relative; }
#navbar li ul {
display: none; }
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;}

Bryon W -

http://www.wcctechhelp.com

--
Visit my latest website: AwfulDeals.com.
Sign up for the Awful Newsletter.