In IE6 (but not FF2 or 3, not IE7, not not -- as far as I've tested -- Safari or Chrome), when I hover over the top-level menu item, it will expand to accommodate the (wider) widths of the drop down list. I don't want it to do this, and I would prefer not to wrap the drop-down items.

Can you please advise how to make IE6 stop this? I'm including what code I think is relevant; if there's some funky inheritance I've missed, let me know...

I really appreciate your help!
--Kir

nav menu code:

<div id="navmenu">
<ul id="nav-L1" class="nav-L1">
<!-- listed in reverse order b/c floating right -->
<li style="width:95px; "><a href="artist.php" style="width:95px; color:#7247A1;" <?php if ($thisPage=='artist') 
 echo ' class="here"';?> >the ARTIST</a>
<ul class="nav-L2" id="contact-L2" style="width:167px; height:auto; background-image: url('pagepix/listframe_R+LL.gif');background-position: bottom right; background-repeat: no-repeat; margin-left: -70px;" >
<li class="li-icon" style="width:160px; background-image:url('pagepix/icoTabby.jpg');"><a href="artist.php" <?php if ($thisPage=='artist') 
 echo ' class="here"';?> style="padding-left: 58px;">About widget</a></li>
<li class="li-icon" style="width:160px; background-image:url('pagepix/icoHeart.jpg');"><a href="mailto:example@example.com" <?php if ($thisPage=='contact') 
 echo ' class="here"';?> style="padding-left: 58px;">Contact Us</a></li>
<li class="last" style="width:160px; "></li>
</ul>
</li>
<li style="width:70px;"><a href="classes.php" style="width:70px;color:#EAA76B;" <?php if ($thisPage=='classes') 
 echo ' class="here"';?> >CLASSES</a>
</li>
<li style="width:130px;"><a href="index.php#buy" style="width:130px;">widgets</a>
<ul class="nav-L2" id="print-L2" style="width:169px;" >
<li class="li-icon" style="width:162px; background-image:url('pagepix/icoRedStarflower.jpg')" ><a href="stores.php" style="padding-left: 62px;"<?php if ($thisPage=='retail') 
 echo ' class="here"';?> >Retail Outlets</a></li>
<!-- <li class="li-icon" style="width:162px; background-image:url('pagepix/icoIvyBerry.jpg');" ><a href="#">Links</a></li> -->
<li class="last" style="width:162px;"></li>
</ul>
</li>
<li style="width:75px;"><a href="portfolio/index.php" style="width:75px; color: #908DBC;">GALLERY</a>
<ul class="nav-L2" id="gal-L2" style="width:135px;" >
<li id="L2angel" class="li-icon" style="width:128px; background-image:url('pagepix/icoAngel.jpg');" ><a href="portfolio/main.php?g2_itemId=30" style="padding-left: 68px;">Angels</a></li>
<li id="L2animal" class="li-icon" style="width:128px; background-image:url('pagepix/icoPig.jpg');" ><a href="portfolio/main.php?g2_itemId=32" >Animals</a></li>
<li id="L2flower" class="li-icon" style="width:128px; background-image:url('pagepix/icoSunflower.jpg');" ><a href="portfolio/main.php?g2_itemId=63">Flowers</a></li>
<li class="last" style="width:128px;"></li>
</ul>
</li>
<li style="width:50px;"><a href="index.php" style="width:50px;"<?php if ($thisPage=='home') 
 echo ' class="here"';?> >HOME</a> </li>
</ul>
</div><!-- end navmenu -->

Basic css:

/* NAVIGATION MENU */
#navmenu {
position: absolute;
z-index: 5;
top: 50px;
right: 78px;
min-width: 990px;
margin: 0;
padding: 0;
}
#navmenu li {
display: block;
float: right;
width: auto;
height: auto;
padding-left: 1em;
}
#navmenu a {
display: block;
color: #829E76;
font-weight: bold;
font-size: 14px;
text-decoration: none;
}
#navmenu a.here, #navmenu a.here:hover, 
#navmenu a.here:sfhover {
color: #D65E50;
cursor: default;
}
/* first level hover */
#navmenu li:hover, #navmenu a:hover, 
#navmenu li:sfhover, #navmenu a:sfhover {
color: #DC7F53;
}
/* second level */
#navmenu li ul {
width: 105px;
position: absolute;
left: -9999em; /* using left instead of display to hide menus because */ 
/* display: none isn't read by screen readers */
padding: 0;
margin: 0;
background-color: transparent;
}
#navmenu li li {
float: none;
width: 95px;
height: 48px; /*30px worked on all but IE*/
padding: 0;
margin: 0 1px 0 1px;
background-color: #ffffff;
border-left: 1px solid #cccccc;
}
#navmenu .li-icon {
background-repeat: no-repeat;
background-position: left center; 
height:48px;
}
#navmenu .nav-L2 {
height:auto; 
background-image: url('../pagepix/listframe_R+LL.gif');
background-position: bottom right; 
background-repeat: no-repeat;
}
#navmenu li li.last {
height:9px; /* this is the height of the bg image */
border-left: none;
background: url('../pagepix/listframe_bot.gif') bottom left no-repeat; 
margin-left: -3px;
}
#navmenu .nav-L2 a {
height: 30px; /* this is OK for IE AND others and removes some white 
gapping in IE*/
padding-left: 65px; /* adjust as needed inline for image */
padding-top: 10px;
}
/* where to display the lists while being hovered ******************************/
#navmenu li:hover ul, 
#navmenu li.sfhover ul {
position: relative; /* this lets the submenu work for more than one button */
left: -5px;
top: -1px;
z-index: 6;
}

IE6 css -- I haven't got anything to work yet, so here's the record of not getting it to work yet:

/* NAVIGATION MENU */
/* in IE6 the submenu widths will expand the main menu li widths, even though the first level LI are specified INLINE in the page
WHY? */
/* from sitepoint forums t=494302&highlight=IE6+expands+width+hover */
#navmenu a {
float: none; /* neither float left nor right solves the expansion */
 /* width: 100% or 90% screws up the HOME link especially AND doesn't solve the expansion */
}

[edited by: swa66 at 12:15 am (utc) on Mar. 20, 2009]
[edit reason] removed specifics [/edit]