IE Menu Issue

@Cory_RJul 15.2008

I have this menu that I use on my site. It works great in FF, however, it has one flaw in IE. The first menus drop-down accordingly, but the second menus (after hovering over the first menu) don’t. ~~[I]~~display:none[/I] seems to be overriding ~~[I]~~display:block[/I] for the ~~[I]~~#bbdrop[/I] ID.

Does anyone know how to fix this malfunction in IE?

CSS:

[CODE].bbnav ul {padding:0; margin:0; list-style:none; cursor:pointer} .bbnav ul li {position:relative; color:#EEF4F6; text-align:center; width:119px; height:22px; line-height:19px; background:url(http://209.85.48.12/11773/23/upload/p1987842.ibf)} .bbnav ul li:hover, .bbnav ul li.hover {background:url(http://209.85.48.12/11773/23/upload/p1987894.ibf)} .bbnav ul li ul {font-size:10px; display:none; position:absolute; width:40px; top:25px; left:0} .bbnav ul li > ul {font-size:10px; top:25px; left:0} .bbnav ul li:hover ul, .bbnav li.over ul {font-size:10px; display:block} #bbdrop ul {position:absolute; top:0; left:119px; display:none} #bbdrop:hover ul, #bbdrop.hover ul {display:block} #main {float:left; position:relative; color:#EEF4F6; text-align:center; width:119px; height:25px; line-height:23px; background:url(http://209.85.48.12/11773/23/upload/p2024758.gif)} #main:hover {background:url(http://209.85.48.12/11773/23/upload/p2024760.gif)}[/CODE]

HTML:

[code=html]<div class=”bbnav”> <ul id=”bbnav”> <li id=”main”><a title=”Home” onclick=”window.open(‘http://bigboardsresources.com/’,’_self’);” style=”display:block; text-decoration:none;”>Home</a> <ul> <li title=”BB Guidelines” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=boardrules’,’_self’)”>BB Guidelines</li> <li title=”BB Advertising Images” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=202′,’_self’)”>BB Advertising Images</li> <li title=”BB IRC Channel” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=348′,’_self’)”>BB IRC Channel</li> <li title=”BB Toolbar” onclick=”window.open(‘http://bigboards.communitytoolbars.com/’,’_self’)”>BB Toolbar</li> <li title=”BB RSS Feed” onclick=”window.open(‘http://thecodingzone.com/if_rss.php?input=http://bigboardsresources.com/index.php?&title=BigBoards’,’_self’)”>BB RSS Feed</li> </ul> </li> <li id=”main”><a title=”About Us” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=94′,’_self’);” style=”display:block; text-decoration:none;”>About Us</a> <ul> <li title=”Contact Us” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=276′,’_self’)”>Contact Us</li> <li title=”BB History” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=224′,’_self’)”>BB History</li> <li title=”BB Groups and Ranks” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=262′,’_self’)”>BB Groups and Ranks</li> <li id=”bbdrop” title=”Staff Profiles” onclick=”window.open(‘http://bigboardsresources.com/’,’_self’)”>Staff Profiles » <ul> <li title=”Staff Profile: Cory” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?act=SR&f=208′,’_self’)”>Staff Profile: Cory</li> <li title=”Staff Profile: HelenaZF” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?act=SR&f=209′,’_self’)”>Staff Profile: HelenaZF</li> <li title=”Staff Profile: Clay” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?act=SR&f=211′,’_self’)”>Staff Profile: Clay</li> <li title=”Staff Profile: Mwr247″ onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?act=SR&f=290′,’_self’)”>Staff Profile: Mwr247</li> </ul></li></ul></li> <li id=”main”><a title=”BB Search” onclick=”window.open(‘http://www.google.com/coop/cse?cx=003574102346989753874%3Ajbaime2-m7i’,’_self’);” style=”display:block; text-decoration:none;”>BB Search</a> <ul> <li title=”Active Topics” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=Search&CODE=getactive’,’_self’)”>Active Topics</li> <li title=”Members” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=Members’,’_self’)”>Members</li> <li title=”Member Map” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=282′,’_self’)”>Member Map</li> <li title=”Help” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=Help’,’_self’)”>Help</li> </ul> </li> <li id=”main”><a title=”IF/ZB Resources” onclick=”window.open(‘http://bigboardsresources.com/index.php?c=15′,’_self’);” style=”display:block; text-decoration:none;”>IF/ZB Resources</a> <ul> <li title=”Resource Archives” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=159′,’_self’)”>Resource Archives</li> <li title=”Board Tools” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=212′,’_self’)”>Board Tools</li> <li title=”IF Reference Library” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=40′,’_self’)”>IF Reference Library</li> <li title=”ZB Reference Library” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=301′,’_self’)”>ZB Reference Library</li> <li id=”bbdrop” title=”IF/ZB Services” onclick=”window.open(‘http://bigboardsresources.com/index.php?c=18′,’_self’)”>IF/ZB Services » <ul> <li title=”Support Desk” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=194′,’_self’)”>Support Desk</li> <li title=”Board Evaluations” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=274′,’_self’)”>Board Evaluations</li> <li title=”Build-A-Board” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=324′,’_self’)”>Build-A-Board</li> <li title=”Community Exchange” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=288′,’_self’)”>Community Exchange</li> <li title=”Advertising Solutions” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=295′,’_self’)”>Advertising Solutions</li> <li title=”Service Archive” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=201′,’_self’)”>Service Archive</li> </ul></li></ul></li> <li id=”main”><a title=”Indexes” onclick=”window.open(‘http://bigboardsresources.com/’,’_self’);” style=”display:block; text-decoration:none;”>Indexes</a> <ul> <li id=”bbdrop” title=”IF Code Categories” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=160′,’_self’)”>IF Code Categories » <ul> <li title=”IF Code Index” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showtopic=1662′,’_self’)”>IF Code Index</li> </ul></li> <li id=”bbdrop” title=”IF Skin Categories” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=161′,’_self’)”>IF Skin Categories » <ul> <li title=”IF Skin Index” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showtopic=1663′,’_self’)”>IF Skin Index</li> </ul></li> <li title=”ZB Code Index” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=303′,’_self’)”>ZB Code Index</li> <li id=”bbdrop” title=”ZB Theme Categories” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=304′,’_self’)”>ZB Theme Category » <ul> <li title=”ZB Theme Index” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showtopic=3070′,’_self’)”>ZB Theme Index</li> </ul></li> <li title=”Solved Support Index” onclick=”window.open(‘http://bigboardsresources.com/index.php?showtopic=1618′,’_self’)”>Solved Support Index</li> <li title=”IF Docs & Codes” onclick=”window.open(‘http://bigboardsresources.com/index.php?showtopic=2886′,’_self’)”>IF Docs & Codes</li> </ul> </li> <li id=”main”><a title=”BB Shop” onclick=”alert(‘Coming Soon!’);” style=”display:block; text-decoration:none;”>BB Shop</a> <ul> <li id=”bbdrop” title=”BB Member Shop” onclick=”window.open(‘http://bigboardsresources.com/index.php?showforum=326′,’_self’)”>BB Member Shop » <ul> <li title=”Request Goods” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=327′,’_self’)”>Request Goods</li> <li title=”Sell Goods” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=328′,’_self’)”>Sell Goods</li> <li title=”Auction Off Goods” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=329′,’_self’)”>Auction Off Goods</li> <li title=”Charity Room” onclick=”e=event||window.event; e.cancelBubble=true;window.open(‘http://bigboardsresources.com/index.php?showforum=331′,’_self’)”>Charity Room</li> </ul> </li> <li title=”Shop & Credit Usage” onclick=”window.open(‘http://bigboardsresources.com/index.php?showtopic=3460&view=findpost&p=13967060′,’_self’)”>Shop Usage</li> </ul></li><li id=”main”> <a title=”Affiliates” onclick=”window.open(‘http://bigboardsresources.com/index.php?act=SR&f=50′,’_self’);” style=”display:block; text-decoration:none;”>Affiliates</a></ul></div><br><br>[/code]

JavaScript:

[CODE]<script>var startList=function (){if(document.getElementById){var bbnav=document.getElementById(‘bbnav’);for(var i=0;i<bbnav.childNodes.length;i++){var node=bbnav.childNodes[i];if(node.nodeName===’LI’){node.onmouseover=function (){this.className=’over’;};node.onmouseout=function (){this.className=this.className.replace(‘over’, ”);};}}}};window.onload=startList;</script>[/CODE]

to post a comment

CSS

9 Comments(s) _↴

@CentauriJul 15.2008 — #Whilst I haven't tested your code, one thing I do see is you have used a class name of "hover" on the <li>s for IE, but the javascript is applying a class name of "over".

@Cory_RauthorJul 15.2008 — #Now, here's the odd part.

<script>var startList=function (){if(document.getElementById){var bbnav=document.getElementById('bbnav');for(var i=0;i<bbnav.childNodes.length;i++){var node=bbnav.childNodes[i];if(node.nodeName==='LI'){node.onmouseover=function (){this.className='[B][COLOR=green]over[/COLOR][/B]';};node.onmouseout=function (){this.className=this.className.replace('[B][COLOR=green]over[/COLOR][/B]', '');};}}}};window.onload=startList;</script>[/QUOTE]

When I change [B][COLOR=green]over[/COLOR][/B] to [B][COLOR=green]hover[/COLOR][/B], not even the first menus drop-down.

@CentauriJul 15.2008 — #Probably because you used "over" here :[CODE].bbnav ul li:hover ul, .bbnav li.[COLOR="Red"]over[/COLOR] ul {font-size:10px; display:block}[/CODE]

@Cory_RauthorJul 15.2008 — #Changing that [I]over[/I] to "hover", and in the script just results in the original malfunction.

@CentauriJul 15.2008 — #Problem appears to be the javascript. Going back to the original "over" class, this javascript works fine :

[CODE]<script type="text/javascript">
 sfHover = function() {
 var sfEls = document.getElementById("bbnav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
 sfEls[i].onmouseover=function() {
 this.className+=" over";
 }
 sfEls[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" over\b"), "");
 }
 }
 }
 if (window.attachEvent) window.attachEvent("onload", sfHover);
 </script>[/CODE]

and comes from here.

@Cory_RauthorJul 15.2008 — #Do I need to change anything in the script? The same malfunction still exists for me.

@CentauriJul 15.2008 — #As long as the classname "over" appears in the css, it should work fine :

[CODE].bbnav ul {padding:0; margin:0; list-style:none; cursor:pointer}
 .bbnav ul li {position:relative; color:#EEF4F6; text-align:center; width:119px; height:22px; line-height:19px; background:url(http://209.85.48.12/11773/23/upload/p1987842.ibf)}
 .bbnav ul li:hover, .bbnav ul li[COLOR="Red"].over[/COLOR] {background:url(http://209.85.48.12/11773/23/upload/p1987894.ibf)}
 .bbnav ul li ul {font-size:10px; display:none; position:absolute; width:40px; top:25px; left:0}
 .bbnav ul li > ul {font-size:10px; top:25px; left:0}
 .bbnav ul li:hover ul, .bbnav li[COLOR="Red"].over[/COLOR] ul {font-size:10px; display:block}
 #bbdrop ul {position:absolute; top:0; left:119px; display:none}
 #bbdrop:hover ul, #bbdrop[COLOR="Red"].over[/COLOR] ul {display:block}
 #main {float:left; position:relative; color:#EEF4F6; text-align:center; width:119px; height:25px; line-height:23px; background:url(http://209.85.48.12/11773/23/upload/p2024758.gif)}
 #main:hover {background:url(http://209.85.48.12/11773/23/upload/p2024760.gif)}[/CODE]

@WebJoelJul 15.2008 — #.bbnav ul li [B][COLOR="Red"][SIZE="4"]>[/SIZE][/COLOR][/B] ul {font-size:10px; top:25px; left:0}[/QUOTE] Is this a typo or an IE-hack? [B][COLOR="Red"]This[/COLOR][/B] above seems to target the second-level if I read this correctly... just curious, -it doesn't do anything harmful but might possibly over-ride the above line due to precedance if ever in conflict:[B][COLOR="Red"].bbnav ul li ul {font-size:10px; display:none; position:absolute; width:40px; top:25px; left:0}[/COLOR][/B]

.bbnav ul li [SIZE="4"]>[/SIZE] ul {font-size:10px; top:25px; left:0}[/QUOTE] although as there is no conflict, all selector/values should be adhered.

Also noted this:.bbnav ul li:hover, .bbnav ul li.over {background:url(http://209.85.48.12/11773/23/upload/p1987894.[B][SIZE="4"][COLOR="Red"]ibf[/COLOR][/SIZE][/B])}[/QUOTE] -I am not familiar with *ibf formt... what is it?

@Cory_RauthorJul 15.2008 — #Thanks Centauri, that managed to sort out the malfunction!

I'm not sure what we're using that strip for, WebJoel. I'll have to check with my friend that constructed the menu for me.

IBF, in my eyes, is an "all around" file that can basically serve as many files. On the host I use, PNG and JS files are automatically converted to IBF files, for example. It's a PNG file, I'll likely convert it to a GIF file, however.

Also in #CSS _↴

Yet another Netscape Question....layout position Not centered in IE

Success!

Help @Cory_R spread the word by sharing this article on Twitter...

Tweet This

IE Menu Issue

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

IE Menu Issue

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴