創建自定義下拉菜單中選擇喜歡在Twitter上用一個當用戶註銷

我試圖創建自定義的下拉列表中選擇喜歡在Twitter上所使用的時候用戶註銷並直到現在我沒有成功：這是我取得的成就，但並未在IE9上工作：|創建自定義下拉菜單中選擇喜歡在Twitter上用一個當用戶註銷

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

那麼，如何建立一個自定義選擇喜歡在Twitter上所使用的？

來源

2012-10-29 RulerNature

爲什麼要重新發明輪子？ http://designwithpc.com/Plugins/ddSlick#demo –

@Rory McCrossan不錯，但我更喜歡一個乾淨的選擇與CSS和HTML最終與一個小的jQuery，但不是與一個大型圖書館：|我已經在我的項目很多JS庫... :( – RulerNature

它的工作在IE9中，當我運行它，也IE8，但不是在IE7雖然。究竟什麼是你要完成？ – SKeurentjes

這適用於我，不需要點擊下拉。只需添加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

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

來源

2012-11-19 17:05:18 gSaenz

創建自定義下拉菜單中選擇喜歡在Twitter上用一個當用戶註銷

回答

相關問題