Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Drop Down Problems In Internet Explorer

Will not drop down - only works in firefox

5:42 pm on Jul 17, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 25, 2006
votes: 0

Okay - so my drop down menu is working in Firefox - but not in Internet Explorer. It doesn't show up at all when I use it in IE. Following is my code for the drop down. All URL's should be stripped from the code. Thank you so very much for your help.


/*URL: [#*$!...] */
.preload2 {background: url();}
.menu2 {padding:0 0 0 0px; margin:0; list-style:none; height:30px; background:#fff url() repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 {
border-top: 2px solid #FF9900;
border-bottom: 2px solid #FF9900;
text-transform: uppercase;
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:30px; line-height:30px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 0px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:30px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:30px; background:url() no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url() no-repeat;}

.menu2 li:hover > a.top_link {color:#fff; background: url() no-repeat;}

.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:40px; background: #ffffff; padding:3px 0; border:1px solid #ff9900; white-space:nowrap; width:150px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:150px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:145px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url() 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url() 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url() 80px 7px no-repeat; color:#fff;}

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}


<span class="preload2"></span>

<ul class="menu2">
<li class="top"><a id="nav-home" href="">&nbsp;</a></li>

<li class="top"><a id="nav-store" href="" class="top_link">&nbsp;</a></li>

<li class="top"><a id="nav-news" href="" class="top_link">&nbsp;<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub" style="margin-top: -10px">
<li><a href="">Articles & Stories</a></li>
<li><a href="">Encyclopedia of Mushing</a></li>
<li><a href="">Mushing News</a></li>
<li><a href="">Interviews</a></li>
<li><a href="">Sled Dog Poetry</a></li>
<li><a href="">Tip of the Day</a></li>
<li><a href="">Mushers Health</a></li>
<li><a href="">Classifieds</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li class="top"><a id="nav-reviews" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-directory" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-forums" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-blogs" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-events" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-photos" href="" class="top_link">&nbsp;</a></li>
<li class="top"><a id="nav-magazine" href="" class="top_link">&nbsp;</a></li>

7:18 pm on July 18, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Apr 25, 2006
votes: 0

All fixed. It was a Z-Index issue.
7:45 pm on July 18, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
votes: 0

thanks for letting us know naitsirhc26

and glad you got it sorted!


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members