Whenever you hover over a parent menu that has a dropdown menu (in this case Services), the menu appears to the left in FireFox and to the right in Chrome - Demo at Sudbury Steam Cleaners
The parent item has it’s CSS set to position: relative, and the submenu set to position: absolute, but it doesn’t seem to want to nestle right underneath.
Any help would be greatly appreciated.
Arrrrrrrrrrrrrrg, it only works with Javascript enabled! Why???
But, ok. Maybe it’s because you’re switching entire states on :hover (display) means that when it appears, you’ve absolutely positioned it but you haven’t given any coordinates. Normally an abso-po’d element goes to its positioned ancestor’s top left corner (0,0) but the JS may somehow be changing that (can’t imagine how though).
I get around the issue by not using JS, but having the abso-po’d submenu pulled offscreen with a negative left or left-margin (it is, after all, abso-po’d already) and letting it come onscreen on :hover and :focus… and so there is a definite left and top setting at all times.
For now, just see if setting a left and top coord fix it. It probably will.
The top element was already there at set to top: 82px, and I added in the left: 0, and that didn’t work.
Also, any thoughts on how I could get a dropdown menu working with JS turned off? I’ve always used JavaScript for drop downs.
Hi,
When doing dropdowns like that your parent LI needs to be block level.
Remove the display:inline; completely and set the LI as float:left;
#top nav ul li {
[COLOR=Red]/*display:inline;*/[/COLOR]
[COLOR=Blue]float:left;
position:relative;[/COLOR]
text-align:center;
Also, any thoughts on how I could get a dropdown menu working with JS turned off? I’ve always used JavaScript for drop downs.
As Stomme poes mentioned you will be better off using negative margins to hide the dropdown offscreen.
It’s all a matter of using li:hover on the parent LI to show and hide the dropdown by targeting the the sub-ul in the li:hover selector.
This simple example will show you the basics of how it works, view the page source. 
Simple Dropdown Navbar
Simple Dropdown Navbar #2
If you need to support IE6 then js will be needed as that browser does not support li:hover
Duh, I remember seeing the display: inline and assumed float… arg. Since display: inline is usually thrown in there for IE6, but here was really was to make the li’s a row. Whoops.
Thanks for the links there
can you please tell in those Simple Dropdown examples css
#nav a {
float:left;
width:170px;
padding:.25em 0;
text-decoration:none;
}
whats the purpose of the float ? It seems to ignore the width if the float is removed. Since the width is already specified shouldn’t it consider it regardless of the float?
whats the purpose of the float ? It seems to ignore the width if the float is removed. Since the width is already specified shouldn’t it consider it regardless of the float?
Hi Nikhil,
Likely in your code the anchors were floated to get around an IE bug: since the li’s are floated to make them sit in a row, the anchors, if set to display: block, can trigger a whitespace bug in IE.
But if they’re floated as well, that bug goes away.
In either case, though, we want the anchors to be some kind of block. Float is also a block context (they are both a kind of block, but with different rules).
The width collapses when you remove float because anchors are inlines by default in HTML4 (I won’t get into HTML5, but there, they can be either blocks or inlines), and inlines cannot be given set dimensions. If you do, they are ignored.
So once you put the inline anchor into a block context by either display: block or float: left, your width is now “seen” by the browser and it can use it.