Jquery dropdown menu

index.html

%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

Jquery dropdown menu.markdown

Jquery dropdown menu

Simple jquery dropdown menu

A Pen by joshgreen on CodePen.

License.

script.js

$("#profileMenu")
  .mouseover(function() {
  $("#dropdown").show(200);
});
$(".dropdown-menu")
  .mouseleave(function() {
  $("#dropdown").hide(400);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@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