Makalah 4Shared

Cara pertama :

#menu{margin:0 auto; padding:0; height:30px; width:930px; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}

#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

#chat{position:fixed; top:25px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}
#box-main-container {
clear:both;
}

.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

#footer-column-divide {
clear:both;
}

.footer-column {
padding: 10px;
}

<div id='menu'>
<ul>
<li><a class='active' href='http://www.blogger.com/profile/16540147497183085501'> Profil</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi-Syairku</a>
<ul>
<li><a href='http://berbagi-kreativitas.blogspot.com/2010/06/kegagalan-bukan-akhir-dari-perjalanan.html'>Puisi Motivasi</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Persahabatan</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Cinta</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Puisi Religi</a></li>
</ul></li>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Materi Kuliah</a>
<ul>
<li><a href='http://berbagi-kreativitas.blogspot.com'>Pemrograman</a></li>
<li><a href='http://berbagi-kreativitas.blogspot.com/search/label/Kumpulan%20Tugas%20Jarkom%202'>Jaringan Komputer</a></li>

</ul></li>