Açılır Üst Menü Hazırlamak

<style type="text/css">
body{
   margin:0;
   padding:0;
}
ul#menu, ul#menu ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
 
ul#menu li {
   float: left;
   position: relative;
   width: GENİŞLİK;
}

ul#menu li ul {
   display: none;
   position: absolute;
}

ul#menu li > ul {
top: auto;
left: auto;
}

ul#menu li a {
font: bold 11px verdana, arial, helvetica, sans-serif; <!-- FONT ÖZELLİKLERİ -->
display: block;
margin: 0;
padding: 0px 0px;
height: YÜKSEKLİK;
width: GENİŞLİK;
color: #RENK;
background-image: url(ÜZERİNE GELMEDEN ÖNCEKİ RESİM);
text-decoration: none;
text-align: center;
text-valign: bottom;
}

ul#menu li a:hover {
color: #RENK;
text-align: center;
text-valign: bottom;
background-image: url(ÜZERİNE GELDİKTEN SONRAKİ RESİM);
}

ul#menu li:hover ul, ul#menu li.over ul {
   display: block;
}
   
</style>  <script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over",

"");
   }
   }
  }
 }
}
window.onload=startList;

</script>
<ul id="menu">
    <li><a href="SAYFA LİNKİ">SAYFA ADI 1</a></li>
    <li><a href="SAYFA LİNKİ">SAYFA ADI 2</a>
    <ul>
        <li><a href="SAYFA LİNKİ">SAYFA ADI 2 ALT BAŞLIK</a></li>
        <li><a href="SAYFA LİNKİ">SAYFA ADI 2 ALT BAŞLIK</a></li>
        <li><a href="SAYFA LİNKİ">SAYFA ADI 2 ALT BAŞLIK</a></li>
    </ul>
    </li>
</ul>