Açılır(drop down) Navigasyon dikey menü

by Mustafa Kaba

HTML

<nav>  
  <ul>
    <li><span>Navigation</span></li>
    <li><a class="active">Kategoriler</a></li>
    <li><a href="#">Anasayfa</a></li>
    <li><a href="http://mintik.com/category/jquery/">jQuery</a>
        <ul>
             <li><a href="#">Form</a>              
             <li><a href="#">Animation</a> 
             <li><a href="#">SlideShow</a> 
             <li><a href="#">Slider</a> 
        </ul>
    </li>
    <li><a href="#">Css3</a></li>
    <li><a href="#">Wordpress</a> 
        <ul>
             <li><a href="#">Theme</a>              
             <li><a href="#">Plugin</a> 
             <li><a href="#">Widget</a> 
        </ul>
    </li>
    <li><a href="#">Photoshop</a></li>
    <li><a href="#">Tutorial</a></li>
    <li><span>Other</span></li>
    <li><a href="#">Search</a></li>
  </ul> 
</nav>

CSS

@import url("http://fonts.googleapis.com/css?family=Lato:300,400,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
:before, :after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}
 
html, body {
  height: 100%;
}
body {
  display: flex;
  font: 15px/1 Lato, sans-serif;
  color: #777;
}
nav {
  width: 200px;
  background: #4a6a8a;
}
nav ul span {
  display: block;
  padding: 15px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  border-bottom: 1px solid #53779b;
}
nav ul a {
  position: relative;
  display: block;
  padding: 15px 15px 17px 50px;
  color: #fff;
  border-bottom: 1px solid #53779b;
  text-decoration:none;
}
nav ul a:hover, {
  background: #53779b;
}
nav ul a:before {
  font: normal 16px FontAwesome;
  top: 15px;
  left: 18px;
}
nav > ul > li:nth-child(2) > a:before {
  content: 'f00a';
}
nav > ul > li:nth-child(3) > a:before {
  content: 'f015';
}
nav > ul > li:nth-child(4) > a:before {
  content: 'f0c3';
}
nav > ul > li:nth-child(5) > a:before {
  content: 'f13c';
}
nav > ul > li:nth-child(6) > a:before {
  content: 'f108';
}
nav > ul > li:nth-child(7) > a:before {
  content: 'f03e';
}
nav > ul > li:nth-child(8) > a:before {
  content: 'f121';
}
nav > ul > li:nth-child(10) > a:before {
  content: 'f002';
}
 
/** sub panel **/
nav ul li ul {
  width:250px;
  margin-left:-250px;
  opacity:0;
  margin-top:-50px;
  position:absolute;
  visibility:hidden;
    -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s;
}
nav ul li:hover ul {
  background-color:#53779b;
  margin-left:200px;
  margin-top:-48px;
  visibility:visible;
  opacity:1;
   -webkit-transition:0.3s;
   -moz-transition:0.3s;
   -ms-transition:0.3s;
   -o-transition:0.3s;
   transition:0.3s;
}
nav ul li ul li {
  background-color:#53779b;
  list-style:none;
}
nav ul li ul...