...

View Full Version : dropdown menu IE6 & 7



NancyJ
01-20-2008, 12:53 AM
I'm having some issues with my drop-down nav in IE.

In IE7 the submenu items don't expand the full width (even with width:100%) and there are some gaps between some of the list elements (its very random) which makes it not work so good.

In IE6 all the menu items are on their own line at 100% width

In FF and Opera it works beautifully. I'd like to keep it looking and working as it does in FF and Opera, I just need it to work the same (or as well as possible) in IE




#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
}

#nav a {
display: block;
padding:5px 25px 5px 15px;
height:100%;
background:url(images/arrow.gif) no-repeat #282828;
background-position: 90% 60%;
border:1px solid #242424;
white-space:nowrap;
border-top:1px solid #484848;
border-bottom: 1px solid #101010;
}

#nav li {
float: left;

}
#nav li ul li
{
float:none;
margin-right:0px;

}


#nav li ul li a
{
background-image:none;
}

#nav li ul { /* second-level lists */
position: absolute;

left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
border:2px solid #484848;
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;

}

#nav li a:hover
{
background-color:#383838;
color:#FFF;
}

li.title
{
background-color:color:#181818;
padding:5px;
font-weight:bold;
}



<ul id = "nav">
<li><a href = "/materials/">Items</a>
<ul>
<li class = "title">Crafted Items</li>
<li><a href = "/materials/category/1/">Cannon Ammunition</a></li>
<li><a href = "/materials/category/2/">Consumable Items</a></li>
<li><a href = "/materials/category/3/">Manufactured Goods</a></li>
<li><a href = "/materials/category/4/">Raw Materials</a></li>
<li><a href = "/materials/category/5/">Recruit Experts</a></li>
<li><a href = "/materials/category/6/">Ship Outfitting</a></li>
<li><a href = "/materials/category/7/">Ships</a></li>
<li><a href = "/materials/category/8/">Shipwright Materials</a></li>
<li><a href = "/materials/category/9/">Structure Architecture</a></li>
</ul>
</li>
<li><a href = "/recipes/">Recipes</a>
<ul>
<li><a href = "/materials/category/1/">Cannon Ammunition</a></li>
<li><a href = "/materials/category/2/">Consumable Items</a></li>
<li><a href = "/materials/category/3/">Manufactured Goods</a></li>
<li><a href = "/materials/category/4/">Raw Materials</a></li>
<li><a href = "/materials/category/5/">Recruit Experts</a></li>
<li><a href = "/materials/category/6/">Ship Outfitting</a></li>
<li><a href = "/materials/category/7/">Ships</a></li>
<li><a href = "/materials/category/8/">Shipwright Materials</a></li>
<li><a href = "/materials/category/9/">Structure Architecture</a></li>
</ul>
</li>
<li><a href = "/information/">Information</a>
<ul>
<li><a href = "/structures/books/">Recipe Books</a></li>
<li><a href = "/structures/">Structures</a></li>
<li><a href = "/resources/">Resources</a></li>
<li><a href = "/ports/">Ports</a></li>
<li><a href = "/production_lines/">Production Lines</a></li>
</ul>
</li>
<li><a href = "/quests/">Quests</a>
<ul>
<li><a href = "/port_quests/">Local Trader Quests</a></li>
<li><a href = "/euro_traders/">European Traders</a/></li>
<li><a href = "/class_quests/">Class Quests</a></li>
</ul>
</li>
<li><a href = "/tools/">Tools</a>
<ul>
<li><a href = "/planner/">Character Planner</a></li>
<li><a href = "/ship_finder/">Ship Finder</a></li>
<li><a href = "/calculator/">Recipe Calculator</a></li>
</ul>
</li>
</ul>

rmedek
01-20-2008, 04:40 AM
In IE 7, getting rid of "#nav a { height: 100%; }" will do the trick. I don't have the .sfHover script at the moment to test it in IE 6.

One weird thing about IE 7—when I test the page, unless I mouse out over the main list items, the sub menu stays on the screen. In other words, if I roll over "Items," then move the mouse down over a sub menu, then move it off to the right, the menu should disappear but instead it stays on the screen. If I move the mouse back over "Items" and then off of it, the sub menu disappears. :confused: I don't have any idea why that would happen.

NancyJ
01-20-2008, 05:16 AM
The height 100&#37; thing seems to have fixed everything in IE7, IE6 is better but now they have huge gaps below the submenu items



sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=]unction() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);



Taking out all the whitespace seems to fix the gaps in IE6 (but thats not a great solution) but the menu doesn't stay when you try to mouse down to the submenu elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum