%nav.animated.bounceInDown
 %ul
  %li
   %a{:href => "#profile"}
    .fa.fa-user
    Profile
  %li
   %a{:href => "#message"}
    .fa.fa-envelope
    Messages
    %span.badge.right 12
  %li.sub-menu
   %a{:href => "#settings"}
    .fa.fa-gear
    Settings
    .fa.fa-caret-down.right
   %ul
    %li
     %a{:href => "#settings"}
      Account
    %li
     %a{:href => "#settings"}
      Profile
    %li
     %a{:href => "#settings"}
      Secruity & Privacy
    %li
     %a{:href => "#settings"}
      Password
    %li
     %a{:href => "#settings"}
      Notification
  %li.sub-menu
   %a{:href => "#message"}
    .fa.fa-question-circle
    Help
    .fa.fa-caret-down.right
   %ul
    %li
     %a{:href => "#settings"}
      FAQ's
    %li
     %a{:href => "#settings"}
      Submit a Ticket
    %li
     %a{:href => "#settings"}
      Network Status
  %li
   %a{:href => "#message"}
    .fa.fa-sign-out
    Logout
View Compiled
@accent: #3498db;
@accent_hover: #2980b9;

body {
  background: #f7f7f7 url("https://38.media.tumblr.com/c026c2203f47be8d0f3fb81f6c5aee25/tumblr_n2hutxfrNr1tubinno1_1280.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Roboto";
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  &::before {
    content: '';
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: #c0392b; /* IE Fallback */
    background: rgba(52,73,94,.8);
    width: 100%;
    height: 100%;
  }
}

nav {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  margin: -78px 0 100px -180px;
  -webkit-box-shadow: 0 0 3px rgba(0,0,0,.1);
     -moz-box-shadow: 0 0 3px rgba(0,0,0,.1);
          box-shadow: 0 0 3px rgba(0,0,0,.1);
  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
    & li {
      & a {
        display: block;
        background: @accent;
        padding: 10px 15px;
        color: #fff;
        text-decoration: none;
        -webkit-transition: 0.2s linear;
           -moz-transition: 0.2s linear;
            -ms-transition: 0.2s linear;
             -o-transition: 0.2s linear;
                transition: 0.2s linear;
        &:hover {
          background: @accent_hover;
        }
        & .fa {
          width: 16px;
          text-align: center;
          margin-right: 5px;
        }
        & .badge {
          display: inline-block;
          background: #fff; /* IE Fallback */
          background: rgba(255,255,255,.2);
          padding: 3px 7px;
          color: #fff;
          font-size: 12px;
          font-weight: 800;
        }
      }
      /* Sub Menu */
      & ul {
        & li {
          & a {
            background: #444;
            border-left: 4px solid transparent;
            padding: 10px 20px;
            &:hover {
              background: #333;
              border-left: 4px solid @accent;
            }
          }
        }
      }
    }
  }
}

/* Float Right/Left */
.right { float: right; }
.left { float: left; }
View Compiled
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
  $(this).parent(".sub-menu").children("ul").slideToggle("100");
  $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

External CSS

  1. https://daneden.github.io/animate.css/animate.min.css
  2. //maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
  3. https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js