CSS Drop down menu

**zincoxide** · 08-17-2006, 12:54 AM

I've been looking into this all day... I've discovered that IE doesn't like the :hover on anything but links.

So... I've been working on it all day and I finally got it working in FF - WITHOUT using the :hover on the <li> tag.

I've got it XHTML strict compliant. And it works in FF... Can anyone tell me why this one isn't working?? Is there anything that I can "tweak" to get it working in IE, or am I wasting my time?

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
	font-family:sans-serif;
}

#menubar {
	width:100%;
	background-color:#000040;	
	height:25px;
}

#menubar ul ul p {
	padding:0px;
	margin:0px;
}

#menubar ul p {
	padding:5px 15px 10px 15px;
	margin:0;
}
#menubar ul {
	padding:0;
	margin:0;
	list-style:none;
	width:150px;
	float:left;
}

#menubar ul a {
	color:white;
	font-weight:bold;
	text-decoration:none;
	display:block;
}

#menubar ul a:hover {
	color:#A00000;
}

#menubar ul ul a {
	color:blue;
	text-decoration:none;
	font-weight:bold;
	display:block;
}

#menubar ul ul a:hover {
	color:orange;
}

#menubar ul a ul {
	background-color:#cccccc;
	width:150px;
}

#menubar a ul {
	display:none;
}

#menubar a:hover ul {
	display:block;
} 
</style>
</head>

<body>
	<div id="menubar">
		<ul>
			<li><p><a href="#">Home</a></p></li>
		</ul>
		<ul>
			<li>
				<p><a href="#">Residential
					<ins>
						<ul>
						 <li><a href="#">Option 1</a></li>
						 <li><a href="#">Option 2</a></li>
						 <li><a href="#">Option 3</a></li>
						 <li><a href="#">Option 4</a></li>
						</ul>
					</ins>
				</a></p>
			</li>
		</ul>
	</div>
</body>
</html>

**LadynRed** · 08-17-2006, 03:49 PM

You cannot get IE to recognize the hover on anything but a link. However, there is a simple solution:

Whatever:hover

It's small, easy to implement, and not at all obtrusive.

What is <ins></ins> ?? No such html tag exists.

**zincoxide** · 08-18-2006, 12:12 AM

I discoverd that IE will only recognize :hover on links, that's why I tried creating the menu with <a> tags instead of <li> tags. I used the INS tags because it is an inline element and will pass validation within an <a></a> tag. INS is a valid XHTML tag (look here).

I tried to place the <ul> inside the <a></a> tags but it was invalid.

I was trying to do it this way to create a way around the IE bug without using behaviors. I read the whatever:hover and I just thought I would try.

I was hoping it would work but I guess it is a waste of time.

**LadynRed** · 08-18-2006, 12:50 AM

Ok, it's a valid element, which I've NEVER seen before nor used. However, the way you used it would not be proper anyway.

You can create image rollovers w/o adding the hover to the <li> item, but on the link within it. Look at the menu here: http://www.southerkentuckyurology.com.. rollover menu.. on the <a> inside a UL.

**zincoxide** · 08-18-2006, 12:45 PM

I see the hover/mouseover effect but no menus pop out.

The INS, inside of an A tag does pass validation - I think because they are both inline elements. So, my thought process was that when you hovered over the A tags it would trigger the :hover CSS. Then if I set up a child element (ie. #menubar a:hover ul { display:block; } that it would appear.

It works in FF but not IE still (even though the :hover is on the A tag).

I was just wondering if there was something else that I could do?

I thought, if it worked, that it would be a good solution because there is no behaviors or javascript involved.

SIDE Question: I'm assuming that you designed that website... If so, why you you have the following code:

HTML Code:

	margin-bottom: -2px;/*value for IE5.5*/
	margin-bottom:/**/ -5px;/*Value for IE5.01*/
	ma\rgin-bottom: -2px;/*value for IE6*/
	margin-bottom: 2px;

Do the different IE versions render the margins differently?? If so, is IE5.01 always add 3px's to a margin?

**LadynRed** · 08-18-2006, 01:02 PM

Yes, I designed that site. It doesn't have pop-out menus (sorry), but it does have hover properties, the same principle should apply for yours.

Yes, the different IE versions do things differently. It IS a mess and I need to get those hacks out of there. I am no longer bending over backwards to support dead browsers like IE 5.01 and IE 5.5, especially with 7 coming out.

You might want to read thru this on Pure CSS flyout menus:
A demonstration of Pure CSS Flyouts in action