CSS Hover Effect In IE

[Monie]

I have a menu list:

Code: Select all

<div id="menuTop">
<ul class="ul">
  <li class="sel" id="but1"><a href="#">Link</a></li>
  <li id="but2"><a href="#">Link</a></li>
  <li id="but3"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
  <li id="but4"><a href="#">Link</a></li>
</ul>
</div>

and the CSS:

Code: Select all

#menuTop ul li {
    float: right;
    display: block;
    margin-right: 2px;
    height: 30px;
    width: 110px; 
    background: url('../img/active.png');
    cursor: pointer;
    height: 30px;
}
#menuTop ul li:hover {
    background: url('../img/hover.png');
}
#menuTop ul li.sel {
    background: url('../img/down.jpg');
}

Works fine with FF. But in IE the hover effect dont seems to work! Any Tips? Thanks...

[Jack Franklin]

It wont work in IE6 because IE6 only allows :hover to be applied to an 'a'. DOes it work in IE7?

[Monie]

Yes...!!! I've fixed them!
I just don't know how but I've fixed it!
You are right Jack about ^
I'll explain my solution later, Thanks.

[welshstew]

Monie, can you post your solution?

Thanks

[Monie]

Sorry for the delay answer... too much holiday I guess

Originally Posted by Monie

[code]
#menuTop ul li:hover {
background: url('../img/hover.png');
}

I just change this CSS ^ into something more specific like this:

Code: Select all

#menuTop ul.list li a:hover {
    background: url('../img/hoveractive.png') no-repeat;
    background-position: bottom;
    font: bold 12px verdana;
    color: #000;
}

and that solved both FF and IE7

[Ed]

I can't see how that worked! (Not that it did.)
Maybe it was something else. Unfortunately, I don't think Firefox cares about the specificness of your Cascading Style Sheets, nor mind Internet Explorer!

lol

Ed.

[Monie]

Well maybe you are right!
I am just playing so hard with them and maybe I forgot which CRUCIAL step solved the problem!