MENU DAN SUBMENU YANG MEMILIKI MOUSE HOVER
Skrip HTML
<html>
<head>
<title>Rizki Movie Rent</title>
<link href="dropdown.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropmenu">
<li><a href="#Horor.html">Horor</a>
<ul>
<li><a href="#The Conjuring.html">The Conjuring</a></li>
<li><a href="#Paranormal Activity.html">Paranormal Activity</a></li>
<li><a href="#Darkness Falls.html">Darkness Falls</a></li>
<li><a href="#Insidious 2.html">Insidious 2</a></li>
</ul>
</li>
<li><a href="#Komedi.html">Komedi</a>
<ul>
<li><a href="#Scary Movie 5">Scary Movie 5</a></li>
<li><a href="#The Hangover 3.html">The Hangover 3</a></li>
<li><a href="#Grown Ups 2.html">Grown Ups 2</a></li>
<li><a href="#Pain and Gain.html">Pain and Gain</a></li>
</ul>
</li>
<li><a href="#Action.html">Action</a>
<ul>
<li><a href="#Crows Zero 1.html">Crows Zero 1</a></li>
<li><a href="#Crows Zero 2.html">Crows Zero 2</a></li>
<li><a href="#Fast and Furious 6.html">Fast and Furious 6</a></li>
<li><a href="#Battleship.html">Battleship</a></li>
</ul>
</li>
</ul>
</body>
</html>
Skrip CSS
/* CSS Document */
.dropmenu {
background: black;
height: 30px;
list-style-type: none;
margin: 0;
padding: 0px;
}
.dropmenu li {
border-right: solid 1px white;
float: left;
height: 30px;
}
.dropmenu li a {
color: #fff;
display: block;
font: 12px arial, verdana, sans-serif;
font-weight: bold;
padding: 9px 20px;
text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: none; }
.dropmenu li:hover ul {
background-color: blue;
border: 1px solid grey;
left: 0px;
padding: 3px;
top: 30px;
width: 160px;
}
.dropmenu li:hover ul li { border: 1; height: 18px; }
.dropmenu li:hover ul li a {
background-color: #778899;
border: 1px solid transparent;
color: #fff;
display: block;
font-size: 11px;
height: 18px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 158px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: red;
border: solid 1px #444;
color: #000;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
TABEL ZEBRA
Skrip HTML+CSS
<html>
<head>
<style>
#body{
background-color:white}
.data
{
width:40%;
margin-top:20px;
margin-left:100px;
border:1px solid white;
font-family: Arial, Helvetica;
text-align:center;
}
td{
border: 1px solid;
}
th
{
text-align:center;
align:center;
background-color:red;
color:white;
}
.data1
{
text-align:center;
background-color:#ccc;
}
tr:hover {
color:red;
cursor: pointer;
}
transition: all 1s;
</style>
<title>Tabel Zebra Nama Hewan</title>
</head>
<table class="data">
<tr>
<th width="27%">Darat </th>
<th width="36%">Laut</th>
<th width="37%">Udara</th>
</tr>
<tr class="data1">
<td height="30">Kadal</td>
<td>Gurita</td>
<td>Rajawali</td>
</tr>
<tr class="data">
<td height="36">Kucing</td>
<td>Paus</td>
<td>Garuda</td>
</tr>
<tr class="data1">
<td>Cicak</td>
<td>Lumba-Lumba</td>
<td>Elang</td>
</tr>
<tr class="utama">
<td>Kuda</td>
<td>Kuda Laut </td>
<td>Kuda Terbang </td>
</tr>
</table>
</html>
