Javascript 创建一个自定义下拉选择，就像用户注销时在twitter上使用的下拉选择一样

我正在尝试创建自定义下拉选择，就像用户注销时在twitter上使用的下拉选择一样，但到目前为止，我没有成功： 这是我取得的成就，但不是IE9：|

ul#main{
颜色：2323；
宽度：120px；
边框：2个实心#ccc；
列表样式：无；
字体大小：12px；
字母间距：-1px；
字体大小：粗体；
文字装饰：无；
高度：30px；
背景#f1f1；
}
ul#main：悬停{
不透明度：0.7；
文字装饰：无；
}
#main>li{
背景：url（'http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png'）100%0无重复；
大纲：0；
填充：10px；
}
ul#main li ul{
显示：无；
宽度：116px；
背景：透明；
边框顶部：1px实心#eaeaea；
填充：2px；
列表样式：无；
利润率：7px0-3px；
}
ul.current_buser li a{
颜色：灰色；；
光标：指针；
}
ul.current\u buser{
背景：石灰！重要；
}
ul#main li ul li a{
显示：块；
填充：5px0；
位置：相对位置；
z指数：5；
}
#主li:focus ul，#主li.用户名：active ul{
显示：块；
}
.救命{
背景：url（“http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png）无重复100%中心；
高度：25px；
边缘底部：2px；
边框底部：1px纯白；
}       
.帮助：悬停{
背景#f4；
}
.注销{
背景：url（“http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png）无重复100%中心；
高度：25px；
}
.注销：悬停{
背景#f4；
高度：25px；
}
.帮助a、.注销a{
颜色：灰色；
字体系列：Museo700Regular，无衬线；
字母间距：0；
字体大小：小；
}
​

---

那么，我如何构建一个像twitter上使用的那样的自定义选择呢？

这对我来说很有效，不需要单击即可获得下拉列表。只需添加li元素，即可将自定义图像放在每个菜单项上。直接的CSS，在我测试过的所有浏览器上都能工作，如果你发现一个浏览器不工作，请告诉我

#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

为什么要重新发明车轮@Rory McCrossan不错，但我更喜欢使用css和html的干净选择，最终使用一个小jQuery，但不使用大型库：|我的项目中已经有很多js库了…：（当我运行它时，它在ie9中工作，也在ie8中工作。但不是在ie7中。你到底想做什么？@SKeurentjes在每个浏览器上扩展，但没有打开我的示例中的链接我有wiki页面…那么，到底什么不起作用？你想做什么？我注意到的唯一一件事是你如何只使用css（：focus/：active）现在还没有js。如果它在IE9中因为一个无效的doctype而不起作用，这会让你陷入怪癖模式（点击f12打开开发工具，你应该看到ie中使用的是什么模式。将它改为IE9而不是怪癖）。

#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;
}

<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>