3 boyutlu menü

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" >$(document).ready(function(){
        $('li.title a').click(function(e){
            var dropDown = $(this).parent().next();
            $('.downlistie').not(dropDown).slideUp('slow');
            dropDown.slideToggle('slow');
            e.preventDefault();
        })
    });
    </script>
    <style>
    ul.container{
        width:100%;
        padding:5px;

    }
    li.accoi-menu{
    list-style:none;
        padding:1px;
        width:100%;
        }
    li.title
    {
    background:#45a2bf;
    list-style:none;
    padding:5px;
    }
    li.title a{
    color:#fff;
        display:block;
    padding:5px;
        font:14px georgia, verdana;
        overflow:hidden;
            position:relative;
        width:100%;
         text-decoration:none;
    }
    .downlistie{

    list-style:none;
        display:none;
        padding-top:5px;
        width:100%;
    }
    .downlistie li{
    background: #f8f8f8;
       list-style:none;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;


        margin:5px ;
        padding:4px 10px;    
    }

    .downlistie li:hover {
    background: #63beda;
    }
    .downlistie li a{
    {
    font:14px georgia, verdana;
    text-decoration:none;
    color:#333;
    }
    .downlistie li a:hover {
    text-decoration:none;
    color:#333;
    }
    </style>
    <ul class="container">
    <li class="accoi-menu">
    <ul>
    <li class="title"><a href="#" >Başlık</a></li>            
    <li class="downlistie">
    <ul>
    <li><a href='#'>Alt başlık</a></li>
    </ul></li></ul></li>
    <li class="accoi-menu">
    <ul>
    <li class="title"><a href="#" >Başlık</a></li>
    <li class="downlistie">
    <ul>
    <li><a href='#'>Alt başlık</a></li>
    </ul></li></ul></li>
    </ul>

CSS

/* 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...