CSS Menu Firefox Problem

[nimirraj99]

I've searched around but can't pinpoint a solution. I have a vertical flyout (dropdown) menu written with CSS that is actually working fine in IE but isn't in Firefox. It works fine through the second set but the third won't show for some reason.

CSS

#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 : 11.05em;
		margin-top : -1.35em;
		background-color: #003300;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		position: absolute;
		left: -999em;
	}
	
	#nav ul ul ul {
		position: absolute;
		left: -999em;
	}
	
	#nav li a {
		width: 11em;
		width : 10em;
		display : block;
		color : white;
		font-weight : bold;
		text-decoration : none;
		border : none;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : black;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul { /* lists nested under hovered list items */
		left: auto;
		display: block;
	}

HTML

<ul id="nav"><li><a href="#" target="_blank">Course Articulations</a>
	<ul><li><a href = "#" target="_blank">WV</a></li>
				<ul><li><a href="" target="_blank">MCTC</a></li>
					<li><a href="" target="_blank">SWVCTC</a></li>
					<li><a href="" target="_blank">WVNCC</a></li>
					</ul>
			<li><a href = "#" target="_blank">KY</a></li>
				<ul><li><a href="" target="_blank">ACTC</a></li></ul>
		</ul>
		</li><br /><br />
		<li><a href="#" target="_blank" >2+2</a>
			<ul><li><a href = "#" target="_blank">College of Business</a></li>
					<ul><li><a href= "" target="_blank">ECJU</a></li></ul>
				<li><a href = "#" target="_blank">College of Education</a></li>
				<li><a href = "#" target="_blank">College of Fine Arts</a></li>
				<li><a href = "#" target="_blank">College of Health Professions</a></li>
				<li><a href = "#" target="_blank">College of Info Tech and Engineering</a></li>
				<li><a href = "#" target="_blank">College of Liberal Arts</a></li>
				<li><a href = "#" target="_blank">College of Science</a></li>
		
			</ul></li>
	</ul>

[Arkinder]

Okay, you're positioning A LOT of elements here. Right now I don't have time to go through the parsing order of them all, but make sure to check the specificity of each rule. I'll take a look at it this again some time after lunch.

Regards
Arkinder

[nimirraj99]

Okay, you're positioning A LOT of elements here. Right now I don't have time to go through the parsing order of them all, but make sure to check the specificity of each rule. I'll take a look at it this again some time after lunch.

Regards
Arkinder

Originally, I believe I only had the li and li ul listed with position but read somewhere that it might be a position issue so I tried adjusting with no luck. I can remove the additionals and get the same result with just the relative in #nav li and absolute in #nav li ul.

Also, I forgot to mention that this is occuring in Safari as well. Those are the only three browsers that I've tested. I find it strange that IE is the only one working properly. Thanks for the assistance.

[Arkinder]

Okay, the problem is simple. The position: absolute; and left: -999em; are being inherited by each child ul . So on the 3rd drop down you're only setting one left: -999em to auto , out of three.

While I can fix that, it creates a new problem. There just isn't a way to write a CSS selector with a pseudo-class that will work on that third ul . Firefox, Chrome, and Safari are all working correctly. Earlier versions of Safari and any version of Opera round down to the nearest unit when using decimal places (12.8em = 12em - not the actual problem but just in case you weren't aware).

You'll just have to make the navigation another way. Lists really aren't even needed for navigation bars.

Regards
Arkinder