<!DOCTYPE html>
<html>
<head><title>Drop down</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tugas</a>
<ul class="sub-menu">
<li><a href="#">Tugas 1</a></li>
<li><a href="#">Tugas 2</a></li>
<li><a href="#">Tugas 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<p>
<table class="zebra" border="1" height="150px" width="500px" align="center">
<tr>
<td>nama</td>
<td>nim</td>
<td>kelas</td>
</tr>
<tr>
<td>paijo</td>
<td>L100</td>
<td>bawah</td>
</tr>
<tr>
<td>painen</td>
<td>L200</td>
<td>tengah</td>
</tr>
<tr>
<td>paijem</td>
<td>L300</td>
<td>atas</td>
</tr> </p>
</table>
</body>
</html>
<html>
<head><title>Drop down</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tugas</a>
<ul class="sub-menu">
<li><a href="#">Tugas 1</a></li>
<li><a href="#">Tugas 2</a></li>
<li><a href="#">Tugas 3</a></li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<p>
<table class="zebra" border="1" height="150px" width="500px" align="center">
<tr>
<td>nama</td>
<td>nim</td>
<td>kelas</td>
</tr>
<tr>
<td>paijo</td>
<td>L100</td>
<td>bawah</td>
</tr>
<tr>
<td>painen</td>
<td>L200</td>
<td>tengah</td>
</tr>
<tr>
<td>paijem</td>
<td>L300</td>
<td>atas</td>
</tr> </p>
</table>
</body>
</html>
ul#menu, ul#menu ul.sub-menu {
padding:0;
margin:0;
text-align:center;
opacity:.9
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type:none;
display:inline-block;
width:120px
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#00FF00;
background:#FF0000;
padding:5px;
display:block
}
ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#333
}
ul#menu li {
position:relative
}
ul#menu li ul.sub-menu {
position: absolute;
top:30px; /* Ganti TOP menjadi BOTTOM jika ingin submenu muncul ke atas (Drop Up) */
display:none
}
ul#menu li:hover ul.sub-menu {
display:block
}
.zebra {
margin-top: 100px;
}
.zebra tr:nth-child(even) {
background-color: #FFF000;
}
.zebra tr:nth-child(odd) {
background-color: #00FF00;
}
.zebra tr:hover {
background-color: #FF00FF;
}
Posted in: Kuliah
0 komentar:
Posting Komentar