Custom select not working on IE9

Question

I have this select that is behaving strange on IE9. First of all links that should open wiki page not working only on IE9 browser and second problem is on hover, why when cursor pass over help and log off the icon is overridden by hover 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

I can at least help you with the Icon issue. The issue is that you are overidding the background with a color. You can have a color or a background image. Not both. You will need to either have a different image in the background that is essentially the same but with different colors, do without the image when you hover or do without the color when you hover.

I'm sorry I can't be more helpful with the IE problem. I sincerely hate IE for things like this.

EDIT: This is something that you can do as mentioned 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 learnt something here too.

Answer 2

OK, for the overridden icon issue credits goes for "ANeves",

but you may use below CSS for preventing extra code lines:

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

---

for the IE9 clicking issue, just add below CSS:

#main ul:hover
{
    display: block;
}

and that's it

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