CSS Dikey Açılır Menü Yapımı

<h1>CSS3 Dikey Menü Yapımı</h1>
 
 * *<nav id="menu"><!--Bir id si menu olan bir nav bar oluşturduk-->
 * * * *<ul class="parent-menu"><!--Asıl menümüzün bulunduğu yer-->
 * * * * * *<!--Menümüzün itemleri-->
 * * * * * *<li><a href="#">Anasayfa</a><!--İlk linkimiz-->
 * * * * * * * *<ul><!--anasayfanın alt menüsü-->
 * * * * * * * * * *<li><a href="#">Konsol</a> <!--Konsol kısmının alt menüsü-->
 * * * * * * * * * *<ul><li><a href="#">PHP Dersleri</a></li>
 * * * * * * * * * *<li><a href="#">Gencbilgin</a></li>
 * * * * * * * * * *<li><a href="#">Alfa</a></li>
 * * * * * * * * * *<li><a href="#">Beta</a></li>
 * * * * * * * *</ul></li>
 * * * * * * * * * *<li><a href="#">PHP Dersleri</a></li>
 * * * * * * * * * *<li><a href="#">Gencbilgin</a></li>
 * * * * * * * * * *<li><a href="#">deneme</a></li>
 * * * * * * * * * *<li><a href="#">Tuğrul Gençoğlu</a></li>
 * * * * * * * * * *<li><a href="#">Alfa</a></li>
 * * * * * * * * * *<li><a href="#">Beta</a></li>
 * * * * * * * *</ul>
 * * * * * *</li>
 * * * * * *<li><a href="#">Bilgisayar</a>
 * * * * * * * *<ul>
 * * * * * * * * * *<li><a href="#">PHP Dersleri</a></li>
 * * * * * * * * * *<li><a href="#">Alfa</a></li>
 * * * * * * * * * *<li><a href="#">Beta</a></li>
 * * * * * * * *</ul></li>
 * * * * * *<li><a href="#">Kayseri</a>
 * * * * * * * *<ul>
 * * * * * * * * * *<li><a href="#">Tuğrul Gençoğlu</a></li>
 * * * * * * * * * *<li><a href="#">Alfa</a></li>
 * * * * * * * * * *<li><a href="#">Beta</a></li>
 * * * * * * * *</ul></li>
 * * * * * *<li><a href="#">İletişim</a>
 * * * * * * * *<ul>
 * * * * * * * * * *<li><a href="#">deneme</a></li>
 * * * * * * * * * *<li><a href="#">Tuğrul Gençoğlu</a></li>
 * * * * * * * *</ul>
 * * * * * *</li>
 * * * *</ul>
 * *</nav>

p, ul, li, div, nav
 * * * *{
 * * * * * *padding:0;
 * * * * * *margin:0;
 * * * *}
 
 * * * *body
 * * * *{
 * * * * * *font-family:Calibri;
 * * * *}
 
 * * * *#menu {
 * * * * * *overflow: auto;
 * * * * * *position:relative;
 * * * * * *z-index:2;
 * * * *}
 
 * * * *.parent-menu {
 * * * * * *background-color: #0c8fff;
 * * * * * *min-width:200px;
 * * * * * *float:left;
 * * * *}
 
 * * * *#menu ul
 * * * *{
 * * * * * *list-style-type:none;
 * * * *}
 
 * * * *#menu ul li a
 * * * *{
 * * * * * *padding:10px 15px;
 * * * * * *display:block;
 * * * * * *color:#fff;
 * * * * * *text-decoration:none;
 * * * *}
 
 * * * * * *#menu ul li a:hover
 * * * * * *{
 * * * * * * * *background-color:#007ee9;
 * * * * * *}
 
 * * * * * *#menu ul li:hover > ul {
 * * * * * * * *left: 200px;
 * * * * * * * *-webkit-transition: left 200ms ease-in;
 * * * * * * * *-moz-transition: left 200ms ease-in;
 * * * * * * * *-ms-transition: left 200ms ease-in;
 * * * * * * * *transition: left 200ms ease-in;
 * * * * * *}
 
 * * * * * *#menu ul li > ul {
 * * * * * * * *position: absolute;
 * * * * * * * *background-color: #333;
 * * * * * * * *top: 0;
 * * * * * * * *left: -200px;
 * * * * * * * *min-width: 200px;
 * * * * * * * *z-index: -1;
 * * * * * * * *height: 100%;
 * * * * * * * *-webkit-transition: left 200ms ease-in;
 * * * * * * * *-moz-transition: left 200ms ease-in;
 * * * * * * * *-ms-transition: left 200ms ease-in;
 * * * * * * * *transition: left 200ms ease-in;
 * * * * * *}
 
 * * * * * *#menu ul li > ul li a:hover
 * * * * * *{
 * * * * * * * *background-color:#2e2e2e;
 * * * * * *}