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

回答

相关问题