Berikut ini adalah script HTML dan style css untuk membuat dropdown menu
<html>
<head>
<title>Dropdown Menu</title>
<style>
#dropdownmenu {
border: 0px;
margin: 0px;
padding: 0px;
font: 80% Verdana, Helvetica, sans-serif;
width: auto;
}
#dropdownmenu ul {
background: #333;
height: 35px;
margin: 0;
padding: 0;
list-style: none;
}
#dropdownmenu li {
float: left;
padding: 0px;
}
#dropdownmenu li a {
background: #333;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
color: #CCC;
}
#dropdownmenu ul li:hover a {
background: #069;
text-decoration: none;
}
#dropdownmenu li ul {
background: #F00;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 150px;
}
#dropdownmenu li:hover ul {
display: block;
}
#dropdownmenu li li {
display: block;
margin: 0px;
padding: 0px;
width: 150px;
}
#dropdownmenu li:hover li a {
background: #333;
}
#dropdownmenu li ul a {
display: block;
height: 35px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#dropdownmenu li ul li:hover a {
background: #069;
text-decoration: none;
}
</style>
</head>
<body bgcolor="#FF99CC">
<div id='dropdownmenu'>
<ul>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>SubMenu 1</a></li>
<li><a href='#'>SubMenu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>SubMenu 1</a></li>
<li><a href='#'>SubMenu 2</a></li>
<li><a href='#'>SubMenu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>SubMenu 1</a></li>
<li><a href='#'>SubMenu 2</a></li>
<li><a href='#'>SubMenu 3</a></li>
<li><a href='#'>SubMenu 4</a></li>
</ul>
</li>
<li><a href='#'>Menu 4</a>
<ul>
<li><a href='#'>SubMenu 1</a></li>
<li><a href='#'>SubMenu 2</a></li>
<li><a href='#'>SubMenu 3</a></li>
<li><a href='#'>SubMenu 4</a></li>
<li><a href='#'>SubMenu 5</a></li>
</ul>
</li>
<li><a href='#'>Tugas PWD dropdown menu</a></li>
</ul>
</div>
</body>
</html>
dan dibawah ini adalah script HTML beserta style css untuk membuat tabel zebra
<html>
<head> <title>Tabel Zebra</title>
<style>
#tabel
{ font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
width: 400px;
text-align: center;
border-collapse: collapse;
}
#tabel th
{ font-size: 12px;
font-weight: normal;
padding: 5px;
background: #F0F;
border: 1px solid #000;
border-bottom: 1px solid #fff;
color: #000;
}
#tabel td
{ padding: 5px;
background: #999;
border: 1px solid #000;
border-bottom: 1px solid #fff;
color: #000
}
#tabel tr:hover td
{ background: #C03;
color: #FFF;
}
</style>
</head>
<body>
<table width="495" border="1" id="tabel">
<thead>
<tr>
<th width="242">HEADER 1</th><th width="242">HEADER 2</th></tr>
</thead>
<tbody>
<tr><td>konten 1 Baris 1</td><td>konten 1 Baris 2</td></tr>
<tr><td>konten 2 Baris 1</td><td>konten 2 Baris 2</td></tr>
<tr><td>konten 3 Baris 1</td><td>konten 3 Baris 2</td></tr>
</tbody>
</table>
</body>
</html>
