创建一个自定义下拉选择，如用户退出时在twitter上使用的选择 [英] Create a custom drop down select like the one used on twitter when user logs out

问题描述

我试图创建自定义下拉选择，像用户在twitter上使用的时候，当用户退出，直到现在我没有成功：
这是我实现，但不工作在IE9：|

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

http://fiddle.jshell.net/Hz2JH/

<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/">Log Off</a></li>
            </ul>
        </li>
    </ul>


ul#main {
    color: 232323;
    width: 120px;
    border:2px solid #ccc;
    list-style: none;
    font-size: 12px;
    letter-spacing: -1px;
    font-weight: bold;
    text-decoration: none;
    height:30px;
    background:#f1f1f1;
}



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

​

推荐答案

这对我有用，不需要点击获取下拉菜单。只需添加li元素，将自定义图像放在每个菜单项上。 Straight CSS，适用于所有已测试的浏览器，如果您发现浏览器无法工作，请让我知道。

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>

这篇关于创建一个自定义下拉选择，如用户退出时在twitter上使用的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！