<html>
<head>
<title>tugas css</title>
<link href="gaya.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#FF0000">
<ul id="menu">
<li><a href="#">SHOW</a></li>
<li><a href="#">SHOW 2</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
</ul>
</li>
<li><a href="#">SHOW 3</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
</ul>
</li>
<li><a href="#">SHOW 4</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a href="#">SHOW 5</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
</ul>
<hr color="#FF0000">
<hr color="#FF0000">
<table id="table" align = "center">
<thead>
<tr><th>NAMA</th><th>NO.HP</th> <th>ALAMAT</th></tr>
</thead>
<tbody>
<tr><td>bagio</td><td>085234562xxx</td><td>Sragen</td></tr>
<tr><td>rahmat</td><td>00897765xxx</td><td>Malang</td></tr>
<tr><td>jaya</td><td>087454532xxx</td><td>Ngawi</td></tr>
</tbody>
<hr color="#FF0000">
<hr color="#FF0000">
<style type="text/css">
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;
text-align:center;
width:120px
}
ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration:none;
color:#F00;
background:#0F6;
padding:5px;
text-align:center;
display:block
}
ul#menu li a:hover, ul#menu li ul.sub-menu li a:hover {
background:#00F;
font-family:"Comic Sans MS", cursive;
color:#CCC;
font-style:italic;
text-align:center;
}
ul#menu li {
position:relative
}
ul#menu li ul.sub-menu {
position: absolute;
top:30px;
display:none
}
ul#menu li:hover ul.sub-menu {
display:block
}
#table
{ font-family: "Arial Black", "Impact", Sans-Serif;
font-size: 12px;
width: 500px;
text-align: center;
border-collapse: collapse;
}
#table th
{ font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color:#00F;
text-align:center;
align:center;
}
#table td
{ padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color:#900;
border-top: 1px solid transparent;
text-align:center;
align:center;
}
#table tr:hover td
{ background: #d0dafd;
color:#0F0;
font-family:"Comic Sans MS", cursive;
font-size:large;
text-align:center;
align:center;
}
</style>
</table>
</body>
</html>
