A Pen by Peter Mullen.

index.html

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#">The Company</a></li>
        <li><a href="#">The People</a></li>
      </ul>
    </li>
    <li><a href="#">Portfolio</a>
      <ul>
        <li><a href="#">All Items</a></li>
        <li><a href="#">Lastest Work</a></li>
        <li><a href="#">Awards</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a>
      <ul>
        <li><a href="#">Map</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

script.js

var $link = $(".main-nav a");
var $slide = $(".main-nav ul");

$link.on('click', function() { 
   var el = $(this);
   el.next($slide)
   .slideToggle();
 });

$link
.closest($slide)
.prev($link)
.addClass("parent");

$(".parent").on('click', function() { 
   var el = $(this);
   el.toggleClass("parent-expanded");
});

Simple,-Colourful,-Sliding-Navigation..markdown

Simple, Colourful, Sliding Navigation.

A Pen by Peter Mullen on CodePen.

License.

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

$orange: #FF3600;
$pink: #db214c;
$yellow: #fdba17;
$green: #4faa0d;
$blue: #06998f;
$brown: #846332;
$purple: #a540e8;
$border: 10px;

* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

body {
  background: #34B9C2;
  font-family: 'Open Sans';
  font-size: 14px;
}

.main-nav {
  background: #fff;
  box-shadow: 0 0 5px #167c82;
  float: left;
  margin: 50px 0 50px 0;
  width: 200px; 
  
  a {
    display: block;
    margin: 0; padding: 15px;
    text-decoration: none;
    color: #000;
    
    &:hover {
      color: white;
    }
  }
  
  ul {
    list-style-type: none;
    margin: 0; padding: 0;
  }
  
  li > ul {
    display: none;
  
    a {
      background: white;
      padding-left: 35px;
    
      &:after {
        content: ""
      } 
    }
  
    li {
      border: 0 !important;
    }
  }
  
  li:nth-child(1) a { 
    border-left: $border solid $pink;
  }

  li:nth-child(1) a:hover {
    background: $pink;
    border-left: $border solid darken($pink, 15%);
  }

  li:nth-child(2) a {
    border-left: $border solid $yellow;
  }

  li:nth-child(2) a:hover {
    background: $yellow; 
    border-left: $border solid darken($yellow, 15%);
  }

  li:nth-child(3) a {
    border-left: $border solid $green;
  }

  li:nth-child(3) a:hover {
    background: $green;
    border-left: $border solid darken($green, 15%);
  }  

  li:nth-child(4) a {
    border-left: $border solid $blue;
  }

  li:nth-child(4) a:hover {
    background: $blue;
    border-left: $border solid darken($blue, 15%);
  }

  li:nth-child(5) a {
    border-left: $border solid $purple; 
  }

  li:nth-child(5) a:hover {
    background: $purple;
    border-left: $border solid darken($purple, 15%);
  }
  
  .parent:after,
  .parent-expanded:after {
    display: inline-block;
    float: right;
  }
  
  .parent:after {
    content: "▼";
  }

  .parent-expanded:after {
    content: "▲";
  }  
}