{HELP}Li:hover and a:hover not working fully

[mhgenterprises]

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

[cacasoft]

You might need to add the following hack:

* html #links li a { /* make hover effect work in IE */
width: 100%;
}

The #links of course, is to be replaced by your style definition you're trying to fix.

Make sure the rule will be added to the #links li a {} if you are using a #links ID or to the .links li a {} if you are using a .links CLASS.

[TheJoshMan]

IE 6 does not support the ":hover" pseudo class for ANY element other than anchors. (<a href>)

Therefor, to accomplish the same results you have to use a little bit of javascript. Here is my preferred method.

<!--[if IE lte 6]>
<script type="text/javascript">
cmdHover = function() {
	var cmdList = document.getElementById("cmd").getElementsByTagName("LI");
	for (var i=0; i<cmdList.length; i++) {
		cmdList[i].onmouseover=function() {
			this.className+=" cmdhover";
		}
		cmdList[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" cmdhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", cmdHover);
</script>
<![endif]-->

That script would add the class "cmdHover" to all <li> thus making them "hoverable" with CSS.

You would need to define the styling for particular <li>'s in your css file like so...

div#dropdownmenu ul li:hover, div#dropdownmenu ul li.cmdHover {
	list-style-type: none;
	background-color: #000000;
}

You would need to add the highlighted. Keep in mind you would need to "copy" each :hover item and change the :hover to .cmdHover in your css...