Hello there, I am having a bit of trouble with a CSS rollover menu.
What I have is is a CSS nav built with nested <ul> tags. The rollovers work fine and the submenu shows up, but the problem is that there is a small gap between the <li> tags that messes up the functionality.
When you roll through and come across the gap, the submenu disappears.
Ive played with the margins and padding on the <ul>, the <li> and the <a> tags on both levels of the nesting but the gap remains.
Could you put your submenu in a Div tag and in your CSS have the Div tag appear on roll over?
<li>s are css inline but they contain <a>s as css inline-block.
You have to change that.
I have used FireBug to test that out, but if I set hem both to inline, the submenu disappears when you roll off of the parent menu items.
When I set them both to inline-block, the same thing exists… The gap is there and breaks the menu.
What should I set them to? Block, then float all of the <li>s or <a>s left?
I am new to working with CSS menus. Can you wrap a nested <ul> with a div?
Im open to suggestions, if there is a better way to achieve this, let me know.
.nav ul li {
display:table-cell;
}
The mark up for the whole menu looks more complicated than it should.
AMAZING!!
Thank you, I have never heard of using that, but I havent heard a lot of things…
[URL=“http://www.equinoxdesigns.net/thermacraft”]
Works great and looks better now…CLICK
Now to make another one for the footer… Thanks again!
You’re welcome. But you know your menu has problems in IE6-7, do you?
I see that now, is there a way to use a conditional statement?
<!–[if !IE]><!–>
Is there another way to code it to be fully cross-browser compatible?
For the 7 or so percent of people using IE6 or IE7, I would be willing to hide the submenu.
Would I need to make another stylesheet for IE that does not use the nested <ul> and use a statement like this?
<!–[if lt IE 8]>
<link rel=“stylesheet” type=“text/css” href=“ie7-and-down.css” />
<![endif]–>
<!–[if lte IE 7]>
<link rel=“stylesheet” type=“text/css” href=“ie7-and-down.css” />
<![endif]–>
Since you don’t have a background on those submenus, I don’t know why are you so keen on removing the gaps.
The good solution I have for you means rewriting the menu.
But there is an easier way if you don’t have time for that: revert to inline for <li>s and decrease the padding for anchors:
.nav a {
color: #000000;
display: block;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 25px;
[COLOR="Red"]padding: 0 5px;[/COLOR]
position: relative;
text-decoration: none;
}
The problem with the gaps was when you roll from the parent menu to the submenu, as your cursor went over the gap, the submenu would vanish.
Now, with your fix, the gap is gone and you can easily navigate the submenu.
Also, I dont mind rewriting the menu, that is why I gave it its own stylesheet. Just in case, so I dont muck up mt main sheet.
I just want a solution that works.
I want things to look and act the way they do now, but cross-browser compatible.
Again, I am not opposed to a conditional that killed the submenu for IE6-7.
If they only get the 5 main links, thats fine…
After all, 7.2 percent of all users have IE6-7.
Thank you for your replies…
Hi,
Where did you get that menu from? Is it one of Timo’s?
It uses a clever trick to make the submenus appear in IE6 without using JS. However you need to set the b element to display:inline-block as well or it breaks IE6.
Here’s the stand alone menu working in IE6 - 8.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.nav, .nav ul {
list-style:none;
position:relative;
float:left;
margin-right:-1000px;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
padding: 0;
}
.nav {
display:inline;
width: 650px;
}
.nav a {
display:block;
line-height:25px;
position:relative;
color:#000;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
text-decoration:none;
font-weight:bold;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
}
.nav a.level1-a {
padding:0 10px 0 0;
background:url(inline/tab.png) no-repeat right top;
color:#000;
}
.navHolder .nav .level1-li {
padding-right: 25px;
}
.nav a.level1-a b {
display:inline-block;
height:25px;
line-height:25px;
padding:0 0 0 10px;
background:url(inline/tab.png) no-repeat left top;
cursor:pointer;
}
.nav li.level1-li {
float:left;
}
.nav ul {
margin-top:-50px;
white-space:nowrap;
float:left;
width:0;
}
.nav ul li {
display:inline-block;
display:table-cell;
}
*+html .nav ul li {
display:inline;
word-spacing:-1em
}
* html .nav ul li {
display:inline;
word-spacing:-1em
}
.nav ul li a {
display:inline-block;
word-spacing:0;
}
.nav a:hover, .nav a:focus, .nav a:active {
margin-top:50px;
color:#EB6E1F;
outline:0;
}
.nav a.level1-a:hover, .nav a.level1-a:focus, .nav a.level1-a:active {
top:-50px;
color:#EB6E1F;
outline:0;
}
.navHolder {
position:relative;
width:750px;
height:50px;
overflow:hidden;
}
.navHolder .nav .level1-li #contactSub {
right: 200px;
}
.navHolder .nav .level1-li #whatWeDoSub {
right: 175px;
}
.navHolder .nav .level1-li #projectsSub {
right: 75px;
}
.navHolder .nav .level1-li #WhoWeAreSub {
right: 75px;
}
</style>
</head>
<body>
<div id="navWrapper">
<div class="navHolder">
<ul class="nav">
<li class="level1-li"><a href="index.html" class="level1-a"><b>HOME</b></a></li>
<li class="level1-li"><a href="who-we-are.html" class="level1-a"><b>WHO WE ARE</b></a>
<ul id="WhoWeAreSub">
<li><a href="#1" class="one">Company History</a></li>
<li><a href="#2" class="two">Our Mission</a></li>
</ul>
</li>
<li class="level1-li"><a href="projects.html" class="level1-a"><b>PROJECTS</b></a>
<ul id="projectsSub">
<li><a href="#1" class="one">Past Projects</a></li>
<li><a href="#2" class="two">Current Projects</a></li>
</ul>
</li>
<li class="level1-li"><a href="what-we-do.html" class="level1-a"><b>WHAT WE DO</b></a>
<ul id="whatWeDoSub">
<li><a href="#1" class="one">Solar Electricity</a></li>
<li><a href="#2" class="two">Radiant Flooring</a></li>
<li><a href="#3" class="three">Solar Hot Water</a></li>
</ul>
</li>
<li class="level1-li"><a href="contact-us.html" class="level1-a"><b>CONTACT US</b></a>
<ul id="contactSub">
<li><a href="#1" class="one">Career Opportunities</a></li>
<li><a href="#2" class="two">Send a Message</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
I’ve just hacked the white-space bug for IE6 and 7 for the time being. I’d need to look at it in more detail to see if there is a better solution.
I’m not sure that it’s worth all that effort just to support ie6 without JS and as noonnope said a simpler more robust (and more usual) method might be better.
However it’s a clever trick.
I viewed that in netrenderer and it looks great…
I would like to keep it JS free, but I am open to better, more elegant solutions.
Minus the rollovers on the homepage, this is my 1st tableless/“pure” CSS design.
To use a pure CSS menu seemed the right thing to do.
That menu you posted looks great, any downsides to the “hack”
Is this the “hack” you mentioned?
.nav ul li {
display:inline-block;
display:table-cell;
}
*+html .nav ul li {
display:inline;
word-spacing:-1em
}
* html .nav ul li {
display:inline;
word-spacing:-1em
}
Is this the “hack” you mentioned?
Yes it’s an approximation for IE6 and 7 and just closes the gap but will depend on font-size of course.
You can find a long discussion on the white-space bug here and in the [URL=“http://www.sitepoint.com/forums/showthread.php?p=4724244#post4724244”]quiz here.
OK thank you, are there any downsides to using the “hack”?
Having said all of this, in your opinion, what is the best way to achieve the menu Im looking for?
I want to have a mirror of it, only smaller, in the footer as well.
Only that you will need to manually adjust it for font-size or if you have background images that need an exact fit you will need to tweak it. Usually negative word spacing doesn’t cause overlap but that menu seems to be stopping that effect.
Having said all of this, in your opinion, what is the best way to achieve the menu Im looking for?
I want to have a mirror of it, only smaller, in the footer as well.
Well if it’s usable as it is then keep what you have got.
I do have a very old example here (about 8 years old) but it needs some JS for IE6 to work. However, because it displays sub menus by default there is no issue if js is disabled.
I just found out where you got the menu from and it’s one of Stu Nichols menus from here. Although Stu says it works in IE6 his version is actually broken also which is unlike him as he is usually brilliant.
I’m not sure that it’s worth all that effort just to support ie6 without JS and as noonnope said a simpler more robust (and more usual) method might be better.
I have not looked at the code in depth yet but I am seeing IDs’ set on the sub UL. I notice that the menu breaks on me with one text zoom due to the relative positioning.
After everything we learned from the links Paul gave (in post#14) I went back and pulled down one of my old examples of an auto width centered sublist.
I did a quick rework of it and added in a sfhover for IE6 as well as adding in the Webkit fix.
Dropline Nav with Centered Sub-List #3 (Webkit Fix)
It seems to be holding up well so far. I’ll play around with it some more later but this thread caught my attention and I wanted to see if I could get rid of the IDs’ you were using on the sublist make it a little more stable.
Hope you find it helpful in some way
Yes, that is where I got the original, I tried to adapt it.
I will look into the code you sent Rayzur, thank you…
Again, thank you to all that have replied, its greatly helpful…