Welcome to WebmasterWorld Guest from 54.167.83.224

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Navigation displaying strangely in IE

     
9:52 pm on Jul 13, 2011 (gmt 0)

New User

joined:June 8, 2011
posts: 4
votes: 0


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]

3:30 pm on July 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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>
5:08 pm on July 16, 2011 (gmt 0)

New User

joined:June 8, 2011
posts: 4
votes: 0


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>
5:41 pm on July 16, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


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?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members