oke langsung saja ini scriptnya :
Untuk css nya kita beri nama cssku.css
#Menu {
background:#ff6803;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Menubox {
width: 875px;
border-radius:6px;
float: left;
margin: 1;
padding: 0;
}
#strike {
border-radius:6px;
margin: 0;
padding: 0;
}
#strike ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#strike li {
border-radius:6px;
list-style: none;
margin: 0;
padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
color:#FFFFFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
background:#ff6803;
width: 150px;
color:#FFFFFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
padding: 7px 10px;
}
#strike li {
border-radius:6px;
float: left;
padding: 0;
}
#strike li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#strike li ul a {
border-radius:6px;
width: 140px;
}
#strike li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
position: static;
}
#tabel-zebra tr:nth-child(even) {
padding: 6px;
background-color: #F00;
}
#tabel-zebra tr:nth-child(odd) {
padding: 6px;
background-color: #B7FFFF;
}
#tabel-zebra td
{
text-align: left;
border-bottom: 1px solid #fff;
color: #00F;
border-top: 1px solid transparent;
}
#tabel-zebra th
{
padding: 6px;
text-align: center;
border-bottom: 1px solid #fff;
color: #F00;
background: #6F6;
border-top: 1px solid transparent;
}
#tabel-zebra tr:hover {
background-color: #F6F;
}
script html index.html<html>
<head>
<title>MENU dan TABEL ZEBRA</title>
<link rel="stylesheet" href="cssku.css" type="text/css" />
</head>
<body>
<div id="Menu">
<ul id="strike">
<li><a href="#">HOME</a></li>
<li>
<a href="http://sinug-uye.blogspot.com/search/label/PEMROGRAMAN">PEMROGRAMAN</a>
<ul>
<li><a href="http://sinug-uye.blogspot.com/search/label/BAHASA%20C">BAHASA C</a>
<ul>
<li><a href="#">DASAR</a></li>
<li><a href="#">MENENGAH</a></li>
<li><a href="#">MASTER</a></li>
</ul>
</li>
<li><a href="#">PHYTON</a>
<ul>
<li><a href="#">DASAR</a></li>
<li><a href="#">MENENGAH</a></li>
<li><a href="#">MASTER</a></li>
</ul>
</li>
<li><a href="http://sinug-uye.blogspot.com">HTML</a></li>
<li><a href="#">BAHASA C++</a></li>
</ul>
</li>
<li>
<a href="#">PERKULIAHAN</a>
<ul>
<li>
<a href="http://sinug-uye.blogspot.com/search/label/SEMESTER%201">SEMESTER 1</a>
</li>
<li><a href="#">SEMESTER 2</a>
</li>
<li><a href="http://sinug-uye.blogspot.com/search/label/SEMESTER%203">SEMESTER 3</a>
<ul>
<li><a href="http://sinug-uye.blogspot.com/search/label/PRAKTIKUM%20SO">PRAKTIKUM SO</a></li>
<li><a href="#">PRAKTIKUM JARKOM</a></li>
<li><a href="http://sinug-uye.blogspot.com/search/label/SISTEM%20OPERASI">SISTEM OPERASI</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Media</a>
<ul>
<li><a href="https://www.facebook.com/nugroho.a.saputra.1">Facebook</a></li>
<li><a href="http://www.twitter.com">Twitter</a></li>
<li><a href="http://www.youtube.com">Youtube</a></li>
<li><a href="http://www.kaskus.co.id">Kaskus</a></li>
</ul>
</li>
</ul></div>
<table id="tabel-zebra">
<tr>
<th colspan="4">JADWAL KULIAH</th>
</tr>
<tr>
<th width="57">Jam</th>
<th width="272">Mata Kuliah</th>
<th width="64">Kelas</th>
<th width="87">Ruang</th>
</tr>
<tr>
<td colspan="4">SENIN</td>
</tr>
<tr>
<td>7 - 8</td>
<td>KEMUHAMMADIYAHAN</td>
<td>D</td>
<td>J0204</td>
</tr>
<tr>
<td colspan="4">SELASA</td>
</tr>
<tr>
<td>7 - 8</td>
<td>PRAKTIKUM SISTEM OPERASI</td>
<td>A</td>
<td>LJKTIF</td>
</tr>
<tr>
<td colspan="4">RABU</td>
</tr>
<tr>
<td>5 - 6</td>
<td>PRAKTIKUM JARINGAN</td>
<td>C</td>
<td>LJKTIF</td>
</tr>
<tr>
<td>10 -12</td>
<td>PENGANTAR SISTEM INFORMASI</td>
<td>C</td>
<td>J0204</td>
</tr>
<tr>
<td colspan="4">KAMIS</td>
</tr>
<tr>
<td>4 - 6</td>
<td>PEMROGRAMAN WEB DASAR</td>
<td>G</td>
<td>J0204</td>
</tr>
<tr>
<td>10 -12</td>
<td>JARINGAN KOMPUTER</td>
<td>C</td>
<td>J0407</td>
</tr>
<tr>
<td colspan="4">JUM'AT</td>
</tr>
<tr>
<td>4 - 6</td>
<td>TEKNIK KOMPUTASI</td>
<td>C</td>
<td>J0407</td>
</tr>
<tr>
<td>7 - 8</td>
<td>ORGANISASI DAN ARSITEKTUR KOMPUTER</td>
<td>B</td>
<td>J0408</td>
</tr>
<tr>
<td>9 - 12</td>
<td>SISTEM OPERASI</td>
<td>C</td>
<td>J0403</td>
</tr>
<tr>
<td>13 -14</td>
<td>ILMU KEALAMAN DASAR</td>
<td>C</td>
<td>J0410</td>
</tr>
</table>
</body>
</html>
Untuk Lebih jelasnya lihat tampilan di blog saya yaaa,, hehehehe
Tidak ada komentar:
Posting Komentar