Problém s auto width v horizontálním menu (CSS+HTC)

Dobrý den, mám takový menší problém. Narazil jsem na publikaci Erica Meyera kde je uevdeno docela pěkné menu. Myslím, že je i pěkně pochopitelné, ale nevím si rady s jednou věcí. Potřeboval bych, aby si menu nastavovalo automaticky šířku podle velikosti položek v menu. U menu první kategorie s tím až takový problém není. Tam je vše v pohodě. Ale problém nastává u menu 2. kategorie, kde v IE se položky této kategorie seřadí za sebe a ne pod sebe. Zkoušel jsem to řešit nastavením blokového prvku li na float a dát mu obtékání z obou stran, ale tohle řešení není dobré. Špatně funguje při použití hover (funguje dobře, ale není to esteticky pěkné - změna pozadí nenastane na celéím řádku kde je tato položka přítomna)
Mohl by mi někdo poradit ?
Pokud někdo neví jak přesně jsem to myslel, tak zde je stránka s menu, které bych potřeboval upravit http://dodox.php5.cz

a zde je příklad jak by to mělo vypadat ... např. http://fph.vse.cz/

výpis z css

/*Menu*/
div#nav {
width: 709px;
float: left;
background-color: #1270c8;
margin: 0px 0px 0px 18px;
_margin: 0px 0px 0px 9px;
}

div#nav ul {
margin: 0;
padding: 0;
background: white;
/*border: 1px solid #CCC;
border-width: 0 1px;*/
}

div#nav li {
position: relative;
list-style: none;
margin: 0;
float: left;
width: 7em;
line-height: 1em;
}

div#nav li:hover {
background: #EBB;
}

div#nav li.submenu {
/*background: url(dropmenu.gif) 95% 50% no-repeat;*/
}

div#nav li.submenu:hover {
background-color: #EDD;
}

div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;
color: black;
margin: 0px 2px;
}

div#nav>ul a {
width: auto;
}

div#nav ul ul {
position: absolute;
width: 7em;
display: none;
margin: 0.1px;

}

div#nav ul ul li {
/*border-bottom: 1px solid #CCC;*/
}

div#nav li.submenu li.submenu {
/*background: url(submenu.gif) 95% 50% no-repeat;*/
}

div#nav li.submenu li.submenu:hover {
background-color: #EDD;
}

div#nav li.submenu li.submenu:hover {
background-color: #EDD;
}

div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {
display:block;
}

div#nav ul.level2 {
top: 1.5em;
left: -1px;
}

div#nav ul.level3 {
top: -1px;
left: 7em;
/*border-top: 1px solid #CCC;*/
}


výpis z html

<div id="nav">
<ul class="level1">
<li><a href="/">Home</a></li>
<li class="submenu"><a href="/services/">Services</a>
<ul class="level2">
<li><a href="/services/strategy/">Strategy</a></li>
<li><a href="/services/optimize/">Optimization</a></li>
<li><a href="/services/guidance/">Guidance</a></li>
<li><a href="/services/training/">Training</a></li>
</ul>
</li>
<li><a href="/events/">Events</a></li>
<li class="submenu"><a href="/pubs/">Publications</a>
<ul class="level2">
<li><a href="/pubs/articles/">Articles</a></li>
<li class="submenu"><a href="/pubs/tuts/">Tutorials</a>
<ul class="level3">
<li><a href="/pubs/tuts/html/">HTML</a></li>
<li><a href="/pubs/tuts/css/">CSS</a></li>
<li><a href="/pubs/tuts/svg/">SVG</a></li>
<li><a href="/pubs/tuts/xml/">XML</a></li>
</ul>
</li>
<li><a href="/pubs/wpapers/">White Papers</a></li>
<li><a href="/pubs/comment/">Commentary</a></li>
</ul>
</li>
<li><a href="/contact/">Contact</a></li>
</ul>
</div>