CSS Navigation displaying strangely in IE

[magic8designs]

I'm working on a site and everything displays fine within the site apart from the navigation. If you look at the navigation in IE and then in FF or Safari you'll see that the navigation overlaps in IE, but not in FF or Safari. Can anybody help me out with this?

HTML
<div class="menu" align="center">
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</li>
</ul>
<li><a href="#">Menu</a></li>
</ul>
</ul>
</div>

CSS
.menu {height: 40px; margin: 0 auto; text-align: center;width: 800px;z-index: 5000;}
.nav, .nav ul {list-style: none outside none;margin: 0;padding: 0;}
.nav a {text-decoration: none;}
.nav {float: left;margin-right: -1px;width: 100px;}
.nav .drop {width: 100px;}
.nav a {font-size: small;margin-bottom: -1px;margin-right: -99px;width: 123px;}
.nav ul li {max-width: 100px;}
.nav b {border: 0 none;cursor: pointer;display: block;font: inherit;}
.nav a {background: none repeat scroll 0 0 transparent;color: #FFFFFF;}
.nav ul a {background: none repeat scroll 0 0 #000000;}
.nav ul ul a {background: none repeat scroll 0 0 #000000;}
.nav ul ul ul a {background: none repeat scroll 0 0 #000000;}
.nav a:hover, .nav a:focus, .nav a:active {background: none repeat scroll 0 0 #000000;color: #FFFFFF;}
.nav li:hover > a {background: none repeat scroll 0 0 #000000;color: #CCCCCC;}
.nav {height: 40px;}
.nav .drop {height: 40px;}
.nav ul {left: 0;position: relative;top: 0;z-index: 5000;}
.nav ul ul {left: 125px;top: -26px;}
.nav ul ul.two {top: -39px;}
.nav ul ul.three {top: -30px;}
.nav ul ul.three li a {width: 150px;}
.nav li.left ul ul {left: auto;right: 95px;}
.nav li, .nav ul {float: left;}
.nav ul li {clear: left;}
.nav a {display: block; position: relative; z-index: 10;}
.nav a.sub-link {float: left; margin-top: 10000px;}
.nav .drop, .nav .fly {margin-top: -10000px;}
.nav ul {margin-bottom: -5000px;}
.nav a:hover, .nav a:focus, .nav a:active {margin-right: 0;}
.nav .fly {width: 100%;}
.nav ul:hover {clear: left;}

Thanks,

[edited by: alt131 at 10:36 am (utc) on Jul 14, 2011]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi magic8designs and welcome to WebmasterWorld :).

The drop-down/fly-outs are behaving as expected in the code sample, however, some of the sub-menus need to be closed, which could be causing the problem. If the following adjustments to the html don't resolve the issue, look through the css for a rule that hasn't been posted.

<div class="menu" align="center">
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</li><!-- delete -->-->
</ul> <!--close ul.three-->
</li><!--close li.fly-->
<li><a href="#">Menu</a></li>
</ul> <!--close ul.two-->
</li> <!--close li.drop-->
</ul>
</div>

[magic8designs]

Is this the structure you are referring to? I've made what I think are the edits that were suggested.

Thanks.

<div class="container" align="center">
<div class="menu" align="center">
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu |</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly"><a class="sub-link" href="#url" style="padding-top:5px; padding-bottom:5px"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>
</li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
</ul>
</div>

[alt131]

Hi magic8designs, almost:

<div class="container" align="center">
<div class="menu" align="center">
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li class="drop"><a class="sub-link" href="#url"><b class="top">Menu |</b></a>
<ul class="two">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="fly">
<a class="sub-link" href="#url" style="padding-top:5px; padding-bottom:5px"><b>Menu</b></a>
<ul class="three">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul> <!--close ul.three-->
</li> <!--close li.fly-->
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul> <!--close ul.two-->
</li> <!--close li.drop-->
</ul> <!--close ul.nav-->
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<ul class="nav">
<li><a href="#">Menu</a></li>
</ul>
<!--</ul> delete-->
</div> <!--close div.menu -->
</div><!--add to close div.container-->

Does that resolve the overlap issue?