This dropdown is an example created using shorthand classes. There is no shorthand class of dropdown
.dropdown-menu class and jquery used in this example is not a part of the framework. We used it for demonstration purpose only. You can either use it or can write your own.
<div class="relative inline-block ">
<a class="button" data-toggle="dropdown">
Dropdown
<i data-feather="chevron-down" class="h-5 ml-1"></i>
</a>
<div class="dropdown-menu hidden absolute z-100 left-0 top-100pc py-1 fs-s2">
<div class="shadow-3 br-6 bg-white min-w-l10 border">
<a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
<a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
<a class="block p-3 hover-bg-gray-lightest no-underline" href="#"> ... </a>
</div>
</div>
</div>
<!-- jquery -->
<script>
$(document).on('click',function(event) {
$target = $(event.target);
if(!$target.closest('.dropdown-menu').length && $('.dropdown-menu').is(":visible")) {
$('.dropdown-menu:visible').toggleClass('hidden');
}
});
$(document).on('click', '[data-toggle=dropdown]', function () {
$(this).siblings('.dropdown-menu').toggleClass('hidden');
return false;
});
$('.dropdown-menu').on('click',function(event){
event.stopPropagation();
});
</script>