Html CSS中下拉菜单的定位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32554024/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning of dropdown menu in CSS
提问by Daniel Beale
sorry if this is a bit of a mess but this is my first project and I think I've got myself in a bit of a mess. I don't have anyone in real life to refer to and I've spent hours trying to fix it! When you click on the 'Menu' item the dropdown appears to the bottom left of the Nav element, not under the 'Menu' item.
对不起，如果这有点乱，但这是我的第一个项目，我想我自己有点乱。我在现实生活中没有任何人可以参考，我已经花了几个小时试图修复它！当您单击“菜单”项时，下拉菜单会出现在导航元素的左下方，而不是“菜单”项下方。
The code is below and I've uploaded to http://www.danielbeale.co.uk/donalberto/if it helps?
代码在下面，我已经上传到http://www.danielbeale.co.uk/donalberto/如果有帮助吗？
I'd be really grateful if someone could help - I'm losing my mind!
如果有人能提供帮助，我将不胜感激 - 我快疯了！
nav {
display: block;
float: right;
padding: 5px;
}
.menu {
display: inline;
}
nav a {
text-align: center;
font-family: playball;
font-size: 1.5em;
color: black;
text-decoration: none;
padding: 5px;
}
.menu a:hover {
color: darkred;
}
.dropdown-toggle {}
.dropdown-menu {
position: absolute;
background-color: white;
float: right;
}<nav>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Menu<b class="caret"></b> `enter code here`</a>
<ul class="dropdown-menu" style="display:none">
<li><a href="menu.html">Evening</a></li>
<li><a href="lmenu.html">Lunch</a></li>
</ul>
</li>
</ul>
</nav>采纳答案by Shawon Kanji
You can try adding in nav class
您可以尝试添加导航类
position:relative;
and in the dropdown-menu class remove float:right and add
并在下拉菜单类中删除 float:right 并添加
right:0;
So this will be new CSS..
所以这将是新的 CSS ..
nav {
position: relative;
display: block;
float: right;
padding: 5px;
}
.dropdown-menu {
position:absolute;
background-color: white;
right:0px;
}
Hope this will help.....
希望这会有所帮助......
