#menu {
position: relative;
width: 100%;
height: 40px;
background: #00CC00;
font-family: arial;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
position: relative;
float: left;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #FFF;
padding: 10px;
float: left;
}
#menu ul li a:hover {
background-color: #00CC00;
color: #333366;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul{
display: block;
position: absolute;
top: 41px;
left: 0px;
}
#menu ul li:hover ul li a {
display: block;
background: #00CC00;
color: #fff;
width: 100%;
}
#menu ul li:hover ul li a:hover {
background: #00CC00;
color: #333366;
}
*{
margin:0;padding:0;
}
body{
background:#0000FF;
font: 14px 'verdana';
}
nav{
margin-top:0;
}
nav ul {
list-style:none;
background-image:-webkit-linear-gradient(top,#ebebeb,#D7D7D7);
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
nav ul:after{
content:" ";
display:block;
clear:both;
}
nav ul li{
float:left;
position:relative;
}
nav ul li a{
color:#555;
display:block;
padding:10px 25px;
text-decoration:none;
}
nav ul ul{
position:absolute;
display:none;
top:100%;
background: #EEEEEE;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
nav ul ul li{
float:none;
}
nav ul li:hover > a, nav ul ul li:hover > a {
color :white;
background-image:-moz-linear-gradient(top, #506def,#2041DE);
background-color:#506def;
}
nav ul ul li:hover > a {
font-weight:bold;
}
nav ul li:hover > ul{
display:block;
}
nav ul ul ul{
position:absolute;
left:100%;
top:0;
}
div#isi{
position:absolute;
left:40px;
top:70px;
z-index:-24;
}
div#isi .left{
float:left;
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
color:#555;
padding:20px;
}
h3{
color:#333;
display:block;
padding-top:10px;
}
div#isi .left ul{
padding-left:15px;
}
/* Style Tabel */
div#isi .right{
float:right;
margin-left:20px;
}
div.right table{
background-color: #CCCCCC;
box-shadow:0 1px 3px rgba(0,0,0,.5);
color:#555;
}
th, td{
padding:10px;
}
tbody tr:nth-child(odd) {
background:#999;
}
tbody tr:hover{
background:#555;
border:#333 1px solid;
color:#FFF;
}
#footer{
color:#555;
background:#CCC;
text-align:center;
padding:10px;
width:100%;
position:fixed;
bottom:0px;
font-size:10px;
box-shadow:0 1px 3px rgba(0,0,0,.5);
}
div#profil{
position:absolute;
left:auto;
left:auto;
z-index:auto;
}
div#pprofil .left{
background-color:#999999;
float:left;
box-shadow:0 1px 3px rgba(o,o,o,.5);
color:#CCCCCC;
padding:200px;
}
h2{
padding-top:inherit;
color:#00CC00;
display:block;
}
div#profil. left. ul{
padding-left:inherit
}
Dan kode Html'nya sebagai berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>L200130179 [Dropdown dengan CSS]</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HOME<ul><li></li><li></li><li></li></ul>
<li><a href="#">ABOUT ME</a><ul><li><a href="#">Reza benarivo</a></li><li><a href="#">
L200130173</a></li><li><a href="#">Kelas E</a></li></ul>
<li><a href="#">CONTACT</a><ul><li><a href="#"><a href="https://www.facebook.com/spaerroew" />
Facebook</a></li><li><a href="#"><a href="#">BBM: 74fa3a3e</a></li></ul>
<li><a href="#">MY WEB</a><ul><li><a href="http://Rezabenarivo.blogspot.com">http://Rezabenarivo.blogspot.com</a></li>
<li></a></li><li></a></li></ul>
</ul>
</div>
<h2 align="justify">DAFTAR HARGA LAPTOP TERBAIK 2013</h2>
<div class="right">
<table class="zebra" cellpadding="0" cellspacing="0">
<tr>
<th>Merk</th>
<th>Type</th>
<th>Harga</th>
</tr>
<tr>
<td>Acer</td>
<td>Aspire E1-471</td>
<td>Rp 4.200.000</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Lenovo ThinkPad X1 Carbon</td>
<td>Rp 15.500.000</td>
</tr>
<tr>
<td>Lenovo</td>
<td>Y510p</td>
<td>Rp 9.000.000</td>
</tr>
<tr>
<td>Acer</td>
<td>Aspire M5-583P-6428</td>
<td>Rp 8.000.000</td>
</tr>
</div>
</table>
<div id="profil">
<div class="left">
<h2>Profil</h2>
<hr />
<h2>Nama</h2>
Reza benarivo
<h2>NIM</h2>
L200130179
<h2>Kelas</h2>
E
<h2>Tugas</h2>
<h1>Pemrogaman Web Dasar</h1>
<ul type="disc">
<li>Membuat Dropdown pada CSS</li>
<li>Membuat Table Zebra</li>
</ul>
</div>
</body>
</html>
Berikut adalah screenshotnya :
