Custom selection does not work in IE9

Question

I have this select, which behaves strangely in IE9. First of all, links that should open a wiki page that does not work only on IE9 browser, and the second problem is on hover, why, when the cursor goes through the help and logs out, the icon is overridden by the background color?

<ul id="main"> <li class="username" tabindex="1" > <a>USER</a> <ul class="curent_buser"> <li class="help"><a href="http://www.wikipedia.org/">Help</a></li> <li class="logoff"><a href="http://www.wikipedia.org/">LogOff</a></li> </ul> </li> </ul> 

CSS

 ul#main { color: gray; width: 120px; border-left: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2; border-top: 1px solid #f2f2f2; list-style: none; font-size: 12px; letter-spacing: -1px; font-weight: bold; text-decoration: none; height:30px; background:green; } ul#main:hover { opacity: 0.7; text-decoration: none; } #main > li{ background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat; outline:0; padding:10px; } ul#main li ul { display: none; width: 116px; background: transparent; border-top: 1px solid #eaeaea; padding: 2px; list-style: none; margin: 7px 0 0 -3px; } ul.curent_buser li a { color: gray;; cursor: pointer; } ul.curent_buser{ background:lime !important; } ul#main li ul li a { display: block; padding: 5px 0; position: relative; z-index: 5; } #main li:focus ul, #main li.username:active ul { display: block; } .help{ background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ; height: 25px; margin-bottom: 2px; border-bottom: 1px solid white; } .help:hover{ background: #f4f4f4; } .logoff{ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ; height: 25px; } .logoff:hover{ background: #f4f4f4 ; height: 25px; } .help a,.logoff a{ color:gray; font-family: Museo700Regular,sans-serif; letter-spacing: 0; font-size: small; }​ 

Fiddle: http://jsfiddle.net/RwtHn/1455/

Answer 1

OK, for loans with canceled badges, "ANeves" is issued,

but you can use below CSS to prevent extra lines of code:

 #main > li > ul > li:hover { background-color: #f4f4f4; } 

---

for IE9 click problem, just add below CSS:

 #main ul:hover { display: block; } 

and what is he

thanks http://www.cssplay.co.uk/menus/cssplay-click-click.html

Answer 2

I can at least help you with the Icon problem. The problem is that you are overriding the background with color. You may have a color or background image. Not both. You will need to either have a different image in the background, which is essentially the same, but with different colors, dispense with the image when you hover or bypass the color when you mouse over.

Sorry, I could not be more helpful with the IE problem. I sincerely hate IE for such things.

EDIT: This is what you can do as indicated in the comment below

  .logoff:hover{ background: #f4f4f4 url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png"); height: 25px; } 

Thanks ANeves for this information. I also learned something.

Answer 3

On hover, you override the background property. Since this property has both color and image, you also override the image.

Set only the color, then:

 .help:hover{ background-color: #f4f4f4; } .logoff:hover{ background-color: #f4f4f4 ; } 

http://jsfiddle.net/RwtHn/1456/