Ubmenu not working in firefox or chrome, but works in IE8 and 9?

HTML & CSS
1

html:


<div id="navigation">
<ul class="top-level">
<li><a href="index.htm">Home Page</a></li>
<li><a href="#">Driver Risk Inventory-II</a></li>
<li><a href="#">How To Order</a></li>
<li><a href="#">Scale Interpretation</a></li>
<li><a href="#">Cost</a></li>
<li><a href="#">Example Report</a></li>
<li><a href="#">DRI-II Research</a></li>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 4</a></li>
<li><a href="#">Sub Menu Item 5</a></li>
<li><a href="#">Sub Menu Item 6</a></li>
<li><a href="#">Sub Menu Item 7</a></li>
<li><a href="#">Sub Menu Item 8</a></li>
</ul>
<li><a href="#">NHTSA Review</a></li>
<li><a href="http://www.bdsltd.com/">www.bdsltd.com</a></li>
<li><a href="http://www.online-testing.com/">www.online-testing.com</a></li>
</ul>
</div>

css:

/* vertical menu */


#navigation {/* font-size:1em; */ width:225px; }
#navigation ul {margin:0px; padding:0px;}
#navigation li {list-style: none;}

ul.top-level {background:#660000;}
ul.top-level li {
border-bottom: #ccc solid;
border-top: #ccc solid;
border-width: 1px;
}

#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:30px;
line-height: 30px;
text-indent: 10px;
text-decoration:none;
font-size:16px;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
}

#navigation li:hover {
background: #000000;
position: relative;
}

ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #660000;
border: #fff solid;
border-width: .5px;
display: block;
position: absolute;
left: 225px;
top: 5px;
}
ul.sub-level li {
border: 1px solid #fff;
float:left;
width:150px;
}

/*Seconda Level*/
#navigation .sub-level {
background: #660000;
}



/*RESET STYLES*/
li:hover .sub-level .sub-level {
display:none;
}
.sub-level li:hover .sub-level {
display:block;
}

any help would be cool…

2

Hi,

As Mallory suggested above the poblem is invalid code. Specifically here:


<li><a href="#">DRI-II Research</a>[B]</li>[/B]
<ul class="sub-level">

You don’t have any nested submenus. You have a ul placed in no-mans-land which is why the styles don’t target it. The ul should be within he list pair. Move that last closing list tag to the other side of the nested ul.

The structure should be like so.


<div id="navigation">
		<ul class="top-level">
				<li><a href="index.htm">Home Page</a></li>
				<li><a href="#">Driver Risk Inventory-II</a></li>
				<li><a href="#">How To Order</a></li>
				<li><a href="#">Scale Interpretation</a></li>
				<li><a href="#">Cost</a></li>
				<li><a href="#">Example Report</a></li>
				<li><a href="#">DRI-II Research</a>
						<ul class="sub-level">
								<li><a href="#">Sub Menu Item 1</a></li>
								<li><a href="#">Sub Menu Item 2</a></li>
								<li><a href="#">Sub Menu Item 3</a></li>
								<li><a href="#">Sub Menu Item 3</a></li>
								<li><a href="#">Sub Menu Item 4</a></li>
								<li><a href="#">Sub Menu Item 5</a></li>
								<li><a href="#">Sub Menu Item 6</a></li>
								<li><a href="#">Sub Menu Item 7</a></li>
								<li><a href="#">Sub Menu Item 8</a></li>
						</ul>
				</li>
				<li><a href="#">NHTSA Review</a></li>
				<li><a href="http://www.bdsltd.com/">www.bdsltd.com</a></li>
				<li><a href="http://www.online-testing.com/">www.online-testing.com</a></li>
		</ul>
</div>
3

Run your HTML through the W3C validator because before looking for bugs, the first step must always be “find your typos”.

After you’ve corrected the HTML, see who still breaks and post again.

As a side note: you have a div wrapping your menu, but you don’t need it. You’re using :hover to do everything, but that means it won’t work for keyboard users. And the display: none/block method is known to keep menus hidden from folks using screen readers.

I really like the setup at HTMLdog’s Sons of Suckerfish menu. They are missing one thing, a “trigger” for IE7, otherwise it’s a pretty good menu. If you’re not supporting IE6, you don’t need the Javascript they offer. That’s only for IE6 who can’t li:hover anyway.

They get around the problem of display: none/block, so their menu is fairly accessible.
You can make it keyboard accessible too, so I guess that’s my other gripe with HTMLdog is they don’t build in keyboard accessiblity from the beginning and they could have.

4

submenu not working in firefox or chrome, but works in IE8 and 9?

sorry for the typo

5

Thank you so much. I don’t know why I didn’t think to check w3 validator… I was pretty sure it was a problem with html (per what I found on google).

Thank you again.