JSFiddle - React, Tailwind, and code Playground
HTML
<div style="height:25px;overflow:hidden">
<span class="toggle">Admin</span> |
<div class="slidetoggle">
<div class="triangle-big"></div>
<div class="triangle-small"></div>
<div class="slideHolder">
<a href="" title="" target="_blank">Forum</a><br />
<a href="" title="" target="_blank">Website</a>
</div>
</div>
<span class="toggle">My account</span>
<div class="slidetoggle">
<div class="triangle-big"></div>
<div class="triangle-small"></div>
<div class="slideHolder">
<a href="" title="">My profile</a><br />
<a href="" title="">User panel</a><br />
<a href="" title="">Log out</a><br />
</div>
</div>
</div>
CSS
.toggle {
cursor: pointer;
padding: 2px 2px 0px 3px;
}
.slidetoggle {
position: absolute;
display: none;
}
.slideHolder{
position: relative;
background-color: white;
padding:10px;
top:0px;
left: 0px;
border: 1px solid #ccc;
-moz-box-shadow: 0 0 5px #c8c8c8;
-webkit-box-shadow: 0 0 5px #c8c8c8;
box-shadow: 0 0 5px #c8c8c8;
text-align: left;
}
#login-links {
padding: 2px 10px 0px 3px;
}
.triangle-big {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #C8C8C8;
position: relative;
top: 6px;
left: 8px;
z-index: 99;
}
.triangle-small {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid white;
position: relative;
top:1px;
left: 10px;
z-index: 100;
}
JavaScript
jQuery(".toggle").live('click', function(e) {
var nextEl = jQuery(this).next(".slidetoggle");
jQuery('.slidetoggle').not(nextEl).hide();
nextEl.slideToggle("fast");
nextEl.css('left', jQuery(this).offset().left - jQuery('#login-links').offset().left + 10);
e.stopPropagation();
});