Create A Custom Drop Down Select Like The One Used On Twitter When User Logs Out

I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed : This is what I achieved but is not working on IE9 :| h

Solution 1:

This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.

#addMenu, #addMenu ul {
list-style: none;
}

#addMenu {
float: left;
}

#addMenu > li {
float: left;
}

#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}

#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}

#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}

#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000; 
}

#addMenu ul li:hover a {
background: #ddd;
}

HTML

<ul id='addMenu'>
    <li>
    <a href='#'>MENU</a>
        <ul class='noJS'>
        <li><a href='URL'>Option1</a></li>
        <li><a href='URL'>Option2</a></li>
        <li><a href='URL'>Option3</a></li>
        <li><a href='URL'>Option4</a></li>
        </ul>
    </li>
</ul>