需要一些关于下拉菜单的帮助。
我在这里做了一个 fiddle :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>
最佳答案
我希望这对你有用。
#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: relative 到 #navbar li 并根据需要更改下拉列表的绝对值。
干杯
关于html - CSS 菜单子(monad)对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28623946/