Hover Over a Menu Item Working in Firefox but not in Internet Explorer

Question

Here is the coding in which hover is working inf firefox but not in IE

.menu
{
 margin-top:1px;
 display:inline-block;

 background-color:#FCFAB4;
 color:#000000;
 height:30px;
 width:121px;
 padding-top:10px;
 font-size:13px;
 font-weight:bold;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-align:center;

}

.menu:hover
{

 background-color:#990000;
 color:#FFFFFF;
 border-bottom:#CC0000;
 text-decoration:none;
  cursor:pointer;
}

Help me

Answer 1

I don't believe the ':hover' pseudo-class is implemented for anything other than 'a' tags in IE. Try another approach (use 'onmouseover' event).

Answer 2

When you say IE it's better to let us know which (IE6/7/8). IE6 does not support :hover on anything but , IE7/8 do.

If you need this to work in IE6 you have a few options.

1. Refactor your code to only use 's in your menu.

2. Use a nice script from Dean Edwards to "upgrade" IE6 and IE7 for several issues such as this one. http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

3. You can use a bit of CSS and JS to give IE6 a way to recognise the :hover on other elements

    /* Nice work around for IE6 issues with hover only being used on , con is that it needs javascript */
     * html li {
        behavior: expression(
                    this.onmouseover = new Function("this.className += ' hover'"),
                    this.onmouseout = new Function("this.className = this.className.replace(' hover','')"),
                    this.style.behavior = null
                  );
    }

IE6 aside looking at your code I'm not really seeing how it works now. What you need is to have a menu element with what evers in it set to display:none, also you should position in using position:absolute/relative and top: XXpx/left: XXpx. Then on :hover you change to display: block.

Hope this helps, Denis

Answer 3

Assuming your menu item is a link a user might select from a horizontal "menu" and looks close to this:

<ul class="menu">
<li><a href="http://www.stackoverflow.com" accesskey="s">stackoverflow</a></li>
<li><a href="http://www.google.com" accesskey="g">google</a></li>
</ul>

Try this CSS:

.menu li{
 display:inline;
 list-style-type:none
 }
.menu li a
{
 margin-top:1px;
 display:inline-block;
 background-color:#FCFAB4;
 color:#000000;
 height:30px;
 width:121px;
 padding-top:10px;
 font-size:13px;
 font-weight:bold;
 font-family:Geneva, Arial, Helvetica, sans-serif;
 text-align:center;

}

.menu li a:hover
{

 background-color:#990000;
 color:#FFFFFF;
 border-bottom:#CC0000;
 text-decoration:none;
  cursor:pointer;
}

If you are using an unordered list as a menu, the list items are not the "menu", the unordered list is the "menu", so apply the class there. And apply the CSS to the anchors to achieve hover functions.

If your menu is vertical, ignore display:inline on the .menu li styles.

Answer 4

IE7 supports :hover on anchors, but IE8 will support it on li's.