Edit in JSFiddle


              
<!--Bilgi Cafem 3D Açılır Menü--> 
<div id='info'> 
<div class='menuHolder'> 
<ul class='nav'> 
<li><a class='top-a' href='#url'><b>Ana Sayfa</b></a></li> 
<li><a class='top-a' href='#url'><b>3 Sütunlu</b></a> 
<div class='col3'> 
<ul class='colLeft'> 
<li><a href='#'>Google Analytics</a></li> 
<li><a href='#'>Chrome Uzantıları</a></li> 
<li><a href='#'>İletişim Formu</a></li> 
<li><a href='#'>Blog Siteleri</a></li> 
<li><a href='#'>Feedburner</a></li> 
</ul> 
<ul class='col'> 
<li><a href='#'>Google Alerts</a></li> 
<li><a href='#'>Kişisel Bloglar</a></li> 
<li><a href='#'>Google Blogları</a></li> 
<li><a href='#'>Teknoloji Blogları</a></li> 
<li><a href='#'>Trafik Arttırma</a></li> 
</ul> 
<ul class='colRight'> 
<li><a href='#'>Moda Blogları</a></li> 
<li><a href='#'>Gezi Blogları</a></li> 
<li><a href='#'>Blogger Temaları</a></li> 
<li><a href='#'>Blog Nasıl Kurulur</a></li> 
<li><a href='#'>Sitenizi Ekleyin</a></li> 
</ul> 
</div> 
</li> 
<li><a class='top-a' href='#url'><b>2 Sütunlu</b></a> 
<div class='col2'> 
<ul class='colLeft'> 
<li><a href='#'>Fotoblog Oluşturma</a></li> 
<li><a href='#'>Güncel Blogculuk</a></li> 
<li><a href='#'>Arşiv Oluşturma</a></li> 
<li><a href='#'>YouTube Eklentisi</a></li> 
<li><a href='#'>MP3 Çalar</a></li> 
</ul> 
<ul class='colRight'> 
<li><a href='#'>Slayt Manşet</a></li> 
<li><a href='#'>Blog Oluşturma</a></li> 
<li><a href='#'>Tema Yükleme</a></li> 
<li><a href='#'>Blogger Tipleri</a></li> 
<li><a href='#'>SEO Araçları</a></li> 
</ul> 
</div> 
</li> 
<li><a class='top-a' href='#url'><b>1 Sütunlu</b></a> 
<div class='col1'> 
<ul class='colSingle'> 
<li><a href='#'>Hileler</a></li> 
<li><a href='#'>Hacking By Etrali</a></li> 
<li><a href='#'>Hacking</a></li> 
<li><a href='#'>Bilgi Cafem 61</a></li> 
</ul> 
</div> 
</li> 
<li><a class='top-a' href='#url'><b>Sabit</b></a></li>
</ul> 
</div>
</div> 
<!--Bilgi Cafem 3D Açılır Menü--> 
/* Blog Hocam 3D Açılır Menü */
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#F1921A; 
border-radius:8px; 
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); 
-moz-perspective: 100px; 
-webkit-perspective: 100px; 
-o-perspective: 100px; 
perspective: 100px; 
} 
.menuHolder ul.nav li {display:inline-block; display:inline;} 
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; 
-moz-transform-style: preserve-3d; 
-webkit-transform-style: preserve-3d; 
-o-transform-style: preserve-3d; 
transform-style: preserve-3d; 
} 
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;} 
.menuHolder ul.nav &gt; li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} 
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} 
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;} 
  .menuHolder ul.nav li:hover a.top-a {background:#679EC9; border-radius:8px 8px 0 0; 
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
} 
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#679EC9; padding:5px 0 10px 0; 
border-radius:0 0 15px 15px; 
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); 
-webkit-transition: 0.5s; 
-moz-transition: 0.5s; 
-o-transition: 0.5s; 
transition: 0.5s; 
-moz-transform-origin: 0px 0px; 
-moz-transform: rotateX(-90deg); 
-webkit-transform-origin: 0px 0px; 
-webkit-transform: rotateX(-90deg); 
-o-transform-origin: 0px 0px; 
-o-transform: rotateX(-90deg); 
transform-origin: 0px 0px; 
transform: rotateX(-90deg); 
-moz-backface-visibility: hidden; 
-webkit-backface-visibility: hidden; 
-o-backface-visibility: hidden; 
backface-visibility: hidden; 
} 
.menuHolder ul.nav div.left {left:auto; right:4px;} 
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; 
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); 
} 
.menuHolder ul.nav div ul.colLeft {margin-left:10px;} 
.menuHolder ul.nav div ul.colRight {margin-right:10px;} 
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} 
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #679EC9; margin:0 5px 0 5px; display:inline;} 
.menuHolder ul.nav div ul li:last-child {border:0;} 
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#679EC9; margin:0; padding:4px 0 4px 15px; background:transparent ;} 
.menuHolder ul.nav div ul li a:hover {color:#000; background:transparent ;} 
.menuHolder ul.nav div.col1 {width:160px;} 
.menuHolder ul.nav div.col2 {width:310px;} 
.menuHolder ul.nav div.col3 {width:460px;} 
.menuHolder ul.nav li:hover div { 
-moz-transform: rotateX(0deg); 
-webkit-transform: rotateX(0deg); 
-o-transform: rotateX(0deg); 
transform: rotateX(0deg); 
}
/* Blog Hocam 3D Açılır Menü */