CSS Suckerfish drop down menu in Firefox

[sachi]

on this site of mine, I am implementing the Suckerfish drop down menu. It seems to work fine in IE6 but the drop down won't work in FF (see Item two menu for drop down effect). Talk about a reversal of fortune that something works in IE!


Here is what my code looks like below. Notice how I also want to get the #nav border-top to be 45px tall but it won't show up in either IE nor FF. And I want the entire width of the navigation to be the background color of green but that isn't showing up either.

I know the code is right because I implemented the same drop down effect at this site of mine This site is how the drop down is supposed to look like.

So there must be something else with the html or css that is affecting it. But I can't pinpoint it.

Thoughts? Ideas?

#nav { 
background-color: #249374;
overflow: hidden;
border-top: 45px solid #249374;
}

#nav ul { 
display: table;
margin: 0 auto;
white-space:nowrap;
}

#nav a {
display: block;
width: 10em;
color: #FFF;
background-color: #249374;
} 

#nav a:hover {
background-color: #cfe0b6;
} 

#nav li { 
position: relative;
display: table-cell;
width: 10em;
}

#nav li ul , #navmenu li li { display: block; }
#nav li ul { position: absolute; width: 10em; left: -999em; } 
#nav li:hover ul { left: auto; }

[jumpenjuhosaphat]

It's something I've been dabling with for the past few months.....The best solution I could find(and it's a pretty nice solution) is this: http://www.xs4all.nl/~peterned/csshover.html#

With this page and some time, you can come up with a really good drop down menu....or a drop up-left-right menu for that matter. Good luck, and let us know if you need more help with this.

[Hades]

Hi, I've taken a look at the code of both pages and I see only one small change from one to another.

On crossroadsclub.net you stated at line 50:
#nav li ul , #nav li li { display: block; }

And on sachitesting.com it says:
#nav li ul , #navmenu li li { display: block; }



I think it should be on both:
#nav li ul , #nav li li { display: block; }

since you are not using any tag with the id="navmenu". But I don't see other differences.

If you get stuck with this I suggest you to try one of these menus.

[sachi]

Good catch, Hades. I overlooked that issue. But even with that fixed, I still can't get the background color to be green.

The links you provided weren't for drop down menus, though.

Originally Posted by Hades

Hi, I've taken a look at the code of both pages and I see only one small change from one to another.

On crossroadsclub.net you stated at line 50:
#nav li ul , #nav li li { display: block; }

And on sachitesting.com it says:
#nav li ul , #navmenu li li { display: block; }



I think it should be on both:
#nav li ul , #nav li li { display: block; }

since you are not using any tag with the id="navmenu". But I don't see other differences.

If you get stuck with this I suggest you to try one of these menus.

[Hades]

But even with that fixed, I still can't get the background color to be green.

Hi, I see them with a green background in both FF and IE.

This is how it looks to me:

Internet Explorer 6:


Firefox 2:


Maybe your browser is caching the CSS file?

Regarding to the link I gave you earlier. Two of these menus are dropdowns:
-Dropdown Menu
-Tab Menu

Hope it helps :)

[sachi]

Yes, that is how they look in my browser too. I mean I want the entire green background to span the width of the website. Make sense?

[Hades]

On about line 139 you have this statement:

#nav ul {
display: table;
margin: 0 auto;
white-space:nowrap;
background-color: #249374;
}


Simply add a width property within that block, something like:
width: 100%;

Good Luck!

[sachi]

Thanks, that did the trick. Also, it turns out that I have incorrect comments such as this (<!----- ) . That was what caused problems.

[Arenlor]

Ah wow, wouldn't have thought of that myself, I know though that when I got the one site I'm in charge of I cleaned up a whole load of comments like that.

[Hades]

Hi!

The HTML comments within the CSS is placed in order to let older browsers to read the page content, even if they do not support CSS.

you usually write:

<style type="text/css">
<!--
/*  ... This section contains the format definitions ... */
-->
</style>

that does not affect the style's functionality.

:)