Hi, I have a horizontal navigation bar that displays submenus when the top parts are hovered over. This works fine in Safari and Firefox, but in Opera, the submenu appears when I hover over the main nav bar, but disappears once I try to mouse down towards the submenu.
My CSS looks like this:
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
} #nav ul li {
display: inline;
position: relative;
margin-left: -.5%;
width: 125px;
}
li.headlink ul {
display: none;
}
li.headlink:hover ul {
width: 125px;
display: block;
position: absolute; top: 15px; left: 1px;
}
As I mentioned in your other thread the problem is 99% likely to be that your submenu is too faraway from the list trigger element.
In the code above you have this.
#nav ul li {
[B]display: inline;[/B]
position: relative;
margin-left: -.5%;
width: 125px;
}
li.headlink ul {
display: none;
}
li.headlink:hover ul {
width: 125px;
display: block;
position: absolute; [B]top: 15px[/B]; left: 1px;
}
Firstly you have set the list to display:inline which means that dimensions will not be applied and the trigger area will only be the text area and current line-height which will vary between browsers.
You should probably float the list so that the dimensions are applied and also float the anchor and give it some height to work with. That height will then be the top position for your submenu.
If you don’t want to give the menu a height then you can try top:auto on the submenu but IE usually gets that wrong and a specific height is always the best method.
Without a working example it will be hard to be 100% accurate but I’m guessing that your problem is related to the above
I should also point out that using display:none to hide the submenu is not the best method for accessibility. To hide the submenu simply move it offscreen and then bring it back again.
Yes, the menu does work when I use float, but I’d rather avoid using float, as that creates more serious positioning problems for the rest of the page content.
And when I move the submenu items up, they only work when they all overlap the parent, which isn’t the most aesthetically pleasing thing in the world
But I’ll work on it. Thanks so much for your help!
There is no problem in using floats as long as you take care of them and clear them properly. As long as the parent ul is not floated the onther elements on the page will no nothing about the inner floated content. Just make sure that the parent contains the floats with the clearfix method.
Note that Opera also has problems in placing absolute elements in respect of inline elements (and so does IE) so you really must use float (or display:inline-block - which needs hacks for ie6 and 7) to make this work cross browser.
If you still must persevere with display:inline then at least set the line-height of the top level list items to a fixed pixel height - it may help. Remember though that vertical margins on inline elements have no effect and that vertical padding on inline elements just bleeds over the line height and has no effect on the flow - just one more reason why you need a float :).
And when I move the submenu items up, they only work when they all overlap the parent, which isn’t the most aesthetically pleasing thing in the world
But I’ll work on it. Thanks so much for your help!
There is no need to make them overlap. They just need to be adjoining and you can’t make them adjoin properly unless the parent is a block box (which floats will create nicely). You can still create separation by adding padding-top to the submenu which creates the illusion of space while in fact still keeping contact.
Drop downs are pretty straight forward but you must follow some logical rules and make sure everything lines up correctly and not leave anything to chance.
If you want this fixed 100% then you’ll need to create a version and put it online for us. It should then be quite easy to fix.
I used float before and cleared them all using “clear: both;” for the subsequent divs, but I didn’t use the clearfix method. Could you maybe explain how that works? I’ve never used that before.
That means that content will start below the floats because you have cleared them and is a pretty straight forward concept. What most people have trouble understanding is containing floats.
When you float items inside a parent then floats are removed from the flow and if the parent only contains floats then it has no height and any borders or backgrounds on the parent container will not show at zero height.
To contain floats you need to either add a clearing div before the closing div of the parent, use the overflow method to clear, or use the clearfix method.
In a ul structure you cannot use a clearing div because you cannot insert a div before the closing ul as that is invalid.
In your drop down example we can’t apply overflow:hidden to the ul because that would hide the dropdowns and nothing would show.
Therefore we are left with the clearing technique using the old clearfix method. You just add a calss of clearfix to the parent in question and any child floats will be contained.
Now try the above and remove the clearfix class to see the dramatic change in layout. All you need to do to clear floats is add that clearfix to the parent of the floats and they will be contained. The overflow method is neater because it uses no extra mark up but can’t be used where you want visible overflow as in your case.
