Question

我正在寻找使用无序列表创建下拉菜单的建议。我已经设法通过使用以下CSS和HTML获得水平无序列表。我想在一些菜单上显示下拉菜单。

我尝试了多种不同的方法，并没有设法做到这一点。

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>

Answer 1

这对于css来说并不太难，因为css涉及嵌套无序列表并隐藏嵌套列表，直到父li挂起。这是一个快速示例，如果您想下拉到约。你的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基本上悬停。

Answer 2

如果您对构建accesibile CSS感兴趣，请查看列表 http://www.alistapart.com/articles/horizdropdowns/ 我最喜欢的网站之一是良好的标准和适当的CSS基础

CSS下拉菜单

2 个答案: