I'm trying to create a dropdown menu like the one here, but I haven't been successful in styling it correctly.
我正在尝试创建一个像这里的下拉菜单,但我没有成功地正确设计它。
The menu I'm looking to create is similar to one found here
我想要创建的菜单类似于此处找到的菜单
Example:
This is what I have so far!
这是我到目前为止!
http://jsfiddle.net/9ggfz0st/1/
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
Account Settings<hr>Billing
</ul>
</div>
I'm not able to center the arrow to the middle, also apply "drop down menu animation effect"
我无法将箭头置于中间,也应用“下拉菜单动画效果”
How can I center the arrow to the center?
如何将箭头置于中心位置?
1 个解决方案
#1
2
In order to change positioning of the arrow, simply change the left
value like so:
要更改箭头的位置,只需更改左侧值,如下所示:
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 40%;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 40%;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
#1
2
In order to change positioning of the arrow, simply change the left
value like so:
要更改箭头的位置,只需更改左侧值,如下所示:
.dropdown-menu:before {
position: absolute;
top: -7px;
left: 40%;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu:after {
position: absolute;
top: -6px;
left: 40%;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}