在下拉菜单中转换CSS下拉菜单
问题描述:
我想将我的下拉菜单转换为下拉菜单。我在网上搜索了信息,但没有帮助。在下拉菜单中转换CSS下拉菜单
我的CSS代码:
#nav
{
margin: 0px;
padding: 0px;
position: absolute;
top: 18px;
display: block;
left: 313px;
}
#nav > li
{
list-style-type:none;
float:left;
display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li:hover ul
{
display:block;
}
#nav > li:hover
{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul
{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li
{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a
{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a
{
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span
{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
答
解决之道在于让孩子UL绝对定位。
这里是一个工作示例:http://jsfiddle.net/3NmRP/
的“边距”的“#nav”只是这里举例起见,你可以将其删除。的
#nav{
margin: 0px; padding: 0px; position: absolute; top: 18px; display: block; left: 313px;
}
#nav > li {
list-style-type:none;
float:left; display:block;
margin:0px 10px;
position:relative;
padding:10px;
width:100px;
}
#nav > li ul {
position:absolute;
bottom: 100%;
}
#nav li:hover > ul {
display:block;
}
#nav > li:hover{
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#nav li ul{
margin:0px;
padding:0px;
display:none;
}
#nav li ul li{
list-style-type:none;
margin:10px 0 0 0;
}
#nav li ul li a{
display:block;
padding:5px 10px;
color:#bdb49f;
text-decoration:none;
}
#nav li ul li:hover a {
color:#b15815;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#nav li span{
cursor:pointer;
margin:0px 10px;
font-weight:bold;
}
#nav {
margin-top: 100px;
}
可能重复[下拉菜单,与纯CSS打开/向上(http://*.com/questions/7814186/drop-down-menu-that-opens-up-upward- with-pure-css) –