我有一个只用 CSS 编写的下拉菜单。它应该看起来像 item|item|item| <- 页 Angular 。但它现在获得了下拉菜单的宽度。我附上一张图片以使其干净:
http://i.stack.imgur.com/a1Esv.jpg
所以电源按钮应该在右边,它的下拉菜单应该在左边。
我的代码(CSS):
span.topnavright {
color:white;
float: right;
vertical-align: middle;
padding-right: 0.7em;
padding-left: 0.7em;
display: table-cell;
}
span.topnavright:hover {
width: auto;
height: auto;
background: #464741;
}
div.menutop {
background: #464741;
color: white;
visibility: hidden;
right: 0px;
position: relative;
float: left;
}
span.topnavright:hover > div.menutop {
visibility: visible;
position: relative;
}
还有我的 HTML:
<span class="topnavright">
<i class="icon-power"></i>
<div class="menutop">
LOLOLO<br />
kdsajfeiéfnédskvmdasévjdsaésvdasjdsf
</div>
</span>
<span class="topnavright">
haha
</span>
<span class="topnavright">
haha
</span>
我的 fiddle :http://jsfiddle.net/m46F6/2/
感谢您的帮助!
最佳答案
将此添加到您的 CSS 中
.icon-power{float:right;}
关于html - CSS 下拉菜单对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17214125/