CSS下拉菜單

我正在尋找關於使用無序列表創建下拉菜單的建議。我設法通過使用下面的CSS和HTML來獲得一個水平的無序列表。我想在一些菜單上顯示下拉菜單。CSS下拉菜單

我試過多種不同的方法，並沒有設法使它正確。

CSS

#nav li { 
    display: inline; 
    padding-right: 22px; 
    vertical-align: middle; 
    text-align: center; 


} 

#nav li a { 
    color: #f9f7ee; 
    background-image:url(images/bullet.gif); 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    text-decoration: none; 
} 

#nav li a:hover { 
    background-image:url(images/bulletsolid.gif); 
    background-repeat:no-repeat; 
    padding-left: 16px; 
    color: #f9f7ee; 
}

HTML

<ul id="nav"> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Teaching</a></li> 
    <li><a href="#">Performing</a></li> 
    <li><a href="#">Media</a></li> 
    <li><a href="#">Blog</a></li> 
    <li><a href="#">Links</a></li> 
    <li><a href="#">Contact</a></li> 
</ul>

來源

2011-09-15 Ged

當時該引擎收錄了那麼多的代碼真的有必要嗎？ – animuson

只要使用「css下拉菜單」顯示以下有趣的結果：[PureCSSMenu.com]（http://purecssmenu.com/），[創建純CSS下拉菜單]（http://csswizardry.com/2011/02/creation-a-pure-css-dropdown-menu /），[Suckerfish Dropdowns之子]（http://www.htmldog.com/articles/suckerfish/dropdowns/）... – sdleihssirhc

只需使用這個在線工具：http ：//purecssmenu.com/ –

這不是太硬與涉及您的嵌套無序列表和隱藏嵌套的人，直到父李懸停CSS。這裏有一個簡單的例子，如果你想在關於下拉下拉。你的html會是這樣的。

<ul id="nav"> 
<li><a href="#">About</a> 
    <ul> 
    <li><a href="#">drop down below about 1</a></li> 
    <li><a href="#">drop down below about 2</a></li> 
    </ul> 
</li> 
</ul> 

#nav ul { 
display: none; 
} 

#nav li:hover > ul { 
display: block; 
}

這會隱藏子ul，直到父ul的li基本上被徘徊。

來源

2011-09-15 18:06:20 SeventotheSeven

如果您有興趣構建accesibile CSS除了檢查清單 http://www.alistapart.com/articles/horizdropdowns/ 我最喜歡的一個有網站的好的標準和適當的CSS基礎

來源

2011-09-15 18:08:34 Simon

回答

相關問題