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.
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.
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!
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.
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.
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.
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
}
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.
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.