Skull Sloph

Posting kali ini di inspirasikan oleh teman ane yang lagi buat web. Katanya sih pingin buat drop down menu
kaya yang ada di gambar yang ada diatas. Saat ditanya  sih ditanya sih ane aga bingung jawabnya. soalnya ane dikit ngerti, tapi nga hapal sintaknya.  Tapi malah makin semangat ni buat bantuinnya. jadi ane shere deh ni posting buat agan-agan yang lagi pingin buat menu drop down. Oh iya... materi ini ane copy dari salah satu web yang mantap abis. Kalo mau lihat posting aslinya, klik disini.

Selamat menikmati.

<style type="text/css">
<!--
body,td,th {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 100%;
 color: #666;
}
body {
 background-color: #fff;
 margin-left: 20px;
 margin-top: 20px;
 margin-right: 20px;
 margin-bottom: 20px;
}

a, a:hover, a:active, a:focus {
 outline:0;
 direction:ltr;
}

.wrapper {
 position:relative; height:25px;
}

.mainmenu {
 position:absolute;
 z-index:100;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:normal;
 font-size:90%;
 line-height:25px;
 left:50%;
 margin-left:-303px;
 width:606px;
}

ul.menu {
 padding:0;
 margin:0;
 list-style:none;
 width:100px;
 overflow:hidden;
 float:left;
 margin-right:1px;
}

ul.menu a {
 text-decoration:none;
 color:#fff;
 padding-left:5px;
}

ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}

ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
 margin-right:1px;
 background-image:url(images/tophover1.png);
 background-repeat:no-repeat;
 background-position:left top;
}

ul.submenu {
 float:left;
 padding:25px 0px 0px 0px;
 margin:0;
 list-style:none;
 background-image:url(images/tophover1.png);
 background-repeat:no-repeat;
 background-position:left top;
 margin:-25px 0px 0px 0px;
}

ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}

ul.submenu li a.endlist {
 background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
-->


</style>


<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list">
 <a class="category" href="#Home">Home</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#about1">About link 1</a></li>
  <li><a href="#about2">About link 2</a></li>
  <li><a href="#about3">About link 3</a></li>
        <li><a href="#about4">About link 4</a></li>
  <li><a class="endlist" href="#about5">About link 5</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#articles1">Articles link 1</a></li>
  <li><a href="#articles2">Articles link 2</a></li>
  <li><a href="#articles3">Articles link 3</a></li>
  <li><a class="endlist" href="#articles4">Articles link 4</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#news1">News link 1</a></li>
  <li><a href="#news2">News link 2</a></li>
  <li><a class="endlist" href="#news3">News link 3</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#donate">Donate</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#contact">Contact</a>
</li>
</ul>
<!-- end mainmenu --></div>
<!-- end wrapper --></div>


Semoga bermanfaat ya gan...!!!