Results 1 to 3 of 3

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

  1. #1
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    <ul>
    <li>About Us</li>
         <ul>
             <li><a href="#">Locations</a></li>
    etc..etc..etc..


    Here is the css:
    Code:
    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!

  2. #2
    Join Date
    Sep 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default li:hover and a:hover problem in IE6

    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.

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default

    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.

    Code:
    <!--[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...

    Code:
    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...
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •