Jquery dropdown menu
@import compass
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,300,700,700italic)
html
font-size: 100%
font-family: 'Open Sans', sans-serif
$primary: rgba(240,45,4, 1.0)
$primary-l: rgba(240,85,4, 1.0)
$grey-4: rgba(231,231,231, 1.0)
$grey-5: rgba(240,240,240, 1.0)
.dropdown-menu
display: inline-block
clear: both
overflow: hidden
margin: 2rem
ul
list-style: none
margin: 0
padding: 0
display: none
min-width: 140px
max-width: 240px
background: $grey-5
position: relative
+border-radius(7px)
&::before
content: ''
width: 0
height: 0
border-style: solid
border-width: 0 10px 10px 10px
border-color: transparent transparent $grey-5 transparent
position: absolute
top: -10px
left: 20px
li
font-size: 0.8rem
display: block
padding: 0
margin: 0
+transition(all .4s)
&:nth-of-type(1)
+border-radius(7px 7px 0 0 )
&:last-of-type
+border-radius(0 0 7px 7px)
&:hover
background: $grey-4
a
padding: 0.7rem 1.4rem
text-decoration: none
margin: 0
display: inline-block
color: $primary-l
width: 100%
&:hover
color: $primary
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$("#profileMenu")
.mouseover(function() {
$("#dropdown").show(200);
});
$(".dropdown-menu")
.mouseleave(function() {
$("#dropdown").hide(400);
});
%nav.dropdown-menu{:role => "navigation"}
%a#profileMenu{:href => "#"}Jquery menu
%ul#dropdown
%li
%a.active{:href => "#"} menu item
%li
%a{:href => "#"} menu item
%li
%a{:href => "#"} menu item
%li
%a{:href => "#"} menu item
%li
%a{:href => "#"} menu item
%li
%a{:href => "#"} menu item