CSS Dropdowns in Firefox

[Volk359]

Greetings All,

I putting a vertical dropdown menu on my site using CSS and an unordered list (<ul> & <li>) which works fine in IE but not in Firefox.

Here's the code:

<style type="text/css">

	body {
		font-family: arial, helvetica, serif;
	}
	
	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 11em;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 11em;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 12.00em; {/* second menu offset */
		margin-top : -1.35em;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	#nav li a {
		width: 11em;
		w\idth : 12em; {/* menu width */
		display : block;
		color : white;
		font-weight : bold;
		text-decoration : none;
		background-color : #0033ff;
		border : 1px solid black;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : #0033cc;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover 

ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, 

#nav li 

li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), 

"");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>

And the menu:

<ul id="nav">
	<li><a href="#">Home</a>
	</li>

		<ul /dropdown>
			<li><a href="#">Sub Item One</a></li>
			<li><a href="#">Sub Item Two</a></li>
		</ul>
	<li><a href="#">Item One</a>
	</li>

		<ul /dropdown>
			<li><a href="#">Sub Item One</a></li>
			<li><a href="#">Sub Item Two</a></li>
		</ul>
	<li><a href="#">Item Two</a>
	</li>

		<ul /dropdown>
			<li><a href="#">Sub Item One</a></li>
			<li><a href="#">Sub Item Two</a></li>
		</ul>

	<li><a href="#">Item Three</a>
	</li>

		<ul /dropdown>
			<li><a href="#">Sub Item One</a></li>
			<li><a href="#">Sub Item Two</a></li>
		</ul>

</ul>

Is there a setting I can add to make it work in both browsers?

Thanks,

Keith

 

[Vragabond]

I would suggest you correct your code according to SuckerFish dropdowns. AFAIK, that code is cross-browser compatible.

 

[ChrisHunt]

One thing you need to fix - the dropdown <ul>s should be within their parent <li>s, like this:

<ul id="nav">
    <li><a href="#">Home</a>
        <ul>
            <li><a href="#">Sub Item One</a></li>
            <li><a href="#">Sub Item Two</a></li>
        </ul>
    </li>

The only element allowed inside a <ul> is an <li>, you can see that the CSS is expecting this structure too:

    #nav li ul { /* second-level lists */

translates as "apply this rule to <ul>s within an <li> within an element with an id of 'nav'".

I'd also remove the [tt]/dropdown[/tt] from your <ul> tags. It's not valid HTML syntax and may be confusing browsers more fussy about such things than Internet Explorer.

Running your page through the Validator is a good way to spot errors like those mentiopned above.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[Volk359]

I'd also remove the /dropdown from your <ul> tags. It's not valid HTML syntax and may be confusing browsers more fussy about such things than Internet Explorer.

Confusing for browsers but it help straighten me out.

Much obliged folks, I'll take a look at Suckerfish and see what's different. In the meantime I've removed the comments and fixed the </li>'s.

I also tried the validator on my page but my machine started to smoke. Still got lots to learn about CSS!

 

[Foamcow]

Confusing for browsers but it help straighten me out.

Use a proper HTML comment then

       <ul> [COLOR=green]<!-- Dropdown -->[/color]
            <li><a href="#">Sub Item One</a></li>
            <li><a href="#">Sub Item Two</a></li>
        </ul>

That's what they are for.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[Volk359]

Foamcow, thanks for the REM verbage!

The menu works now but Firefox (and Netscape) seems to make the menu 16 pixels wider then IE. It's also hiding a graphic strip in the cell, too. The Sucker fish site seems to work in all three browsers but not on my site, even if I copy the page locally to my hard drive.

I'm still in the early learning stages of CSS. Any suggestions?

 

[Vragabond]

Do you have a complete doctype at the beginning of the document?
List of valid doctypes

 

[Volk359]

Er... unfortunately no and was hoping no one would raise that question. I'm using host based software which is suprisingly versatile however limited and it does not add doctypes. I had initially thought of that but when I copied just the code and just the list into a seperate document on to my hard drive I believe I experienced the same issues. I'll double check on that tonight and bug the hosters again.

 

[Volk359]

Seems that's what the problem is. Adding a doctype fixed it but I don't have a convenient way to do it with the hosted software I use. Thanks for your help and advice.

One last question, what's an "em"? How many pixels or "px" are there in an em?

 

[Vragabond]

em is supposedly the width of an "M" character. It is a dynamic unit that varies with the size of the text you're using.