I've been attempting to style a dropdown menu, similar to the one located at this link, but I'm having trouble getting it to look just right.
The type of menu I'm striving for can be found here
Sample:
This is what I have managed to create 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 struggling to center the arrow in the middle of the menu and also apply a "drop down menu animation effect."
How do I go about centering the arrow perfectly?