Yan Açılır Menü Örneği

<div class="acilir-menu">
<ul id="acilir-menu1">
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">Film Türleri</a>
    <ul>
        <li><a href="#">Aile</a></li>
        <li><a href="#">Komedi</a></li>
        <li><a href="#">Dram</a></li>
    </ul>
</li>
<li><a href="#">S.S.S</a></li>
<li><a href="#">İletişim</a>
  <ul>
  <li><a href="#">Alt</a></li>
  <li><a href="#">Alt</a>
    <ul>
    <li><a href="#">Alt</a></li>
    <li><a href="#">Alt</a></li>
    <li><a href="#">Alt</a></li>
    <li><a href="#">Alt</a></li>
    </ul>
  </li>
</ul>
</li>
</ul>
</div>

.acilir-menu ul {margin: 0; padding: 0; list-style-type: none; font: bold 13px Verdana; width: 180px; border-bottom: 1px solid #ccc;}
    .acilir-menu ul li {position: relative;}
    .acilir-menu ul li a {display: block; overflow: auto; color: white; text-decoration: none; padding: 6px; border-bottom: 1px solid #778; border-right: 1px solid #778;}
    .acilir-menu ul li a:link, .acilir-menu ul li a:visited, .acilir-menu ul li a:active{background-color: #012D58;}
    .acilir-menu ul li a:visited {color: white;}
    .acilir-menu ul li a:hover {background-color: black;}
    .acilir-menu ul li ul {position: absolute; width: 170px; top: 0; visibility: hidden;}
    .acilir-menu a.subfolderstyle {background: url(right.gif) no-repeat 97% 50%;}
    * html .acilir-menu ul li {float: left; height: 1%;} /* IE İçin Hack */
    * html .acilir-menu ul li a {height: 1%;} /* IE İçin Hack */

<script type="text/javascript">
    var menuids=["acilir-menu1"]

    function initsidebarmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i])
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      for (var t=ultags.length-1; t>-1; t--){
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    if (window.addEventListener)
    window.addEventListener("load", initsidebarmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initsidebarmenu)
    </script>