在下拉菜单中需要一些帮助。
我在这里做了一个小提琴:http://jsfiddle.net/bLL0rmbd/
我想像图像中那样对齐悬停子菜单:
HTML:
<div id="wrapper">
<div id="navbar">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">SubMenu 1</a></li>
<li><a href="#">SubMenu 2</a></li>
<li><a href="#">SubMenu 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
<style>
#wrapper {padding: 0; margin: 30px}
#navbar ul {
padding: 0;
margin:0px;
list-style: none;
float:left;
background:#FF6;
}
#navbar ul li { display: inline-block; margin-right:20px;}
#navbar ul li a {text-decoration:none;}
#navbar ul ul {
position:absolute;
display: none;
}
#navbar ul ul li {display:block;}
#navbar ul li:hover > ul {
display: block;
background-color:#CFC;
}
</style>
答案 0 :(得分:1)
我希望这适合你。
#navbar ul {
padding: 0;
margin:0px;
list-style: none;
float:left;
background:#FF6;
position: relative;
}
#navbar ul ul {
position:absolute;
display: none;
right: 0;
top: 100%;
}
我只有3行代码pos:相对于ul和下拉列表的绝对值。
或者您可以设置pos:相对于#navbar li并更改下拉列表的绝对值。
干杯
答案 1 :(得分:0)
在子菜单中添加否定margin-left
,它应该有效:
#navbar ul li:hover > ul
{ display: block;
background-color:#CFC;
margin-left:-25px;
}
答案 2 :(得分:0)
你这个css在这里
#navbar ul {
padding: 0;
margin:0px;
float:left;
background:#CFC;
position: relative;
}
#navbar ul ul {
position:absolute;
display: none;
right: 0;
top: 100%;
}
答案 3 :(得分:0)
为您最近的问题添加此CSS样式:
li:hover{background-color:#CFC;}
#navbar ul li:hover > ul
{ display: block;
background-color:#CFC;
margin-left:-25px;
}
查看这个小提琴:http://jsfiddle.net/bLL0rmbd/11/
答案 4 :(得分:0)
#navbar ul {
padding: 0;
margin:0px;
list-style: none;
float:left;
background:#FF6;
position: relative;
}
#navbar ul ul {
position:absolute;
display: none;
right: 0;
top: 100%;
}