I am developing an application and I have three buttons on the nav bar (messages, notifications and user photo).
When clicking on each one, a dropdown appears (for each one) and has that arrow (the triangle) that should point to each one of the buttons if selected (I want a behavior like Google or freelancer.com). At the moment I just did what I described (the dropdown works with Bootstrap).
Example (site freelancer.com)
(It'sasifthetrianglehaschangedpositionaccordingtothebutton,butthedropdowndoesnot)
Summaryofabutton
<liclass="dropdown">
<!--Mensagens 2-->
<a href="#" style="padding-right: 2px; padding-top: 10px !important;" class="nav-button profile" data-toggle="dropdown">
<span style="font-size: 20px;" class="fa fa-envelope"></span>
<sup><span class="notification">20</span></sup>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="#">Mensagens</a>
<a href="#">Configurações</a>
<a href="#">Link 3</a>
</div>
</li>
NOTE: These are names because I have not yet finished kkkkkkk (test only).
Dropdown CSS: after (the arrow):
.dropdown-menu:after{
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
top: -10px;
right: 20%;
}
I do not think that way (and I have no idea what that is). I ask the help of you friends ... Ah, also wanted to put a border on the arrow if possible.