Ok, i'm working on a multi level dropdown, and it works fine in FF, chrome but surprise surprise, not IE

 

Dunno if any of you can help me, i know looking at css code without a an example to look at is difficult.

 

.menu {float:right; height:30px; position:relative; margin:0; font-size:11px; margin:20px 0 60px 0; background:#fff; position:relative; z-index:100;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7}
.menu table {border-collapse:collapse; margin:0; padding:0; font-size:1em;}
.menu ul li ul {visibility:hidden; position:absolute; top:30px; left:0; } 
.menu ul li:hover a,
.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; background:#b3ab79; color:#fff; right:0}
.menu ul li:hover ul.right_side li,
.menu ul li a:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li,
.menu ul li a:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.sub,
.menu ul li a:hover ul li a.sub {background:#bd8d5e; color:#fff;}
.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; left:0; top:30px; }
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {visibility:visible; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

 

And this is the corresponding html modx is outputting

 

  <div class="menu"> 
<ul> 
	<li><a  class="hide active" href="http://localhost/sites/modx/" title="home">home</a> 
		<ul> 
			<li><a href="/sites/modx/index.php?id=9" title="Test">Test</a></li> 
		</ul> 
	</li> 
<li><a  class="hide" href="/sites/modx/index.php?id=3" title="Porfolio">Porfolio</a> 
	<ul> 
		<li><a href="/sites/modx/index.php?id=10" title="test2">test2</a></li> 
		</ul> 
</li> 
<li><a href="/sites/modx/index.php?id=4" title="Clients">Clients</a></li> 
<li><a  class="hide" href="/sites/modx/index.php?id=5" title="About">About</a> 
	<ul> 
		<li><a href="/sites/modx/index.php?id=11" title="tester">tester</a></li> 
		<li><a href="/sites/modx/index.php?id=12" title="about link 2">about link 2</a></li> 
		<li class="last"><a href="/sites/modx/index.php?id=13" title="about link 3">about link 3</a></li> 
	</ul> 
</li> 
<li class="last"><a href="/sites/modx/index.php?id=6" title="Contact">Contact</a></li> 
	</ul> 
 </div>

 

Bear in mind this is a work in progress so the code isn't the cleanest it could be.

 

It's floated to the right, and it expands depending on how many top level links there are. When you mouseover a top level link the submenu underneath appears which is the same width as the above menu (if there are more links then they're pushed onto a second row).

 

In IE though, the submenu is expanding far beyond the size of the top level nav, anyone any idea's or pointers?

 

P.S i just indented the html to make it easier to read, does anyone know of a way to make modx output indented html?

Aaaah nvm, sorted it.

 

Defined an absolute width for the dropdowns, although this may cause problems down the line... i'll cross that bridge when i come to it.