1.
MEMBUAT MENU DROP DOWN
<html>
<head>
<style>
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:white;
background:blue;
padding:5px;
display:block
}
ul#menu
li a:hover, ul#menu li ul.sub-menu li a:hover {
background:green
}
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
}
</style>
</head>
<body>
<ul
id="menu">
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu
2</a>
<ul class="sub-menu">
<li><a href="#">Sub
Menu 1</a></li>
</ul>
</li>
<li><a href="#">Menu
3</a>
<ul class="sub-menu">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub
Menu 2</a></li>
</ul>
</li>
<li><a href="#">Menu
4</a>
<ul class="sub-menu">
<li><a href="#">Sub
Menu 1</a></li>
<li><a href="#">Sub
Menu 2</a></li>
<li><a href="#">Sub
Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu
5</a>
<ul class="sub-menu">
<li><a href="#">Sub
Menu 1</a></li>
<li><a href="#">Sub
Menu 2</a></li>
<li><a href="#">Sub
Menu 3</a></li>
<li><a href="#">Sub
Menu 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
2.
SCRIPT MEMBUAT TABLE ZEBRA
<html>
<head>
<style>
#table-a
{ font-family: "Comic Sans MS",
"Comic Sans MS", Sans-Serif;
font-size:
12px;
width:
500px;
text-align:
center;
border-collapse:
collapse;
}
#table-a
th
{ font-size: 13px;
font-weight:
normal;
padding:
8px;
background:
#EAA400;
border-top:
4px solid #DB9900;
border-bottom:
1px solid #fff;
color:
#FDFDF0;
}
#table-a
td
{ padding: 8px;
background:
#FFBE28;
border-bottom:
1px solid #fff;
color:
#669;
border-top:
1px solid transparent;
}
#table-a
tr:hover td
{ background: #FFE099;
color:
#F70000;
}
</style>
</head>
<body>
<table
id="table-a">
<thead>
<tr><th>A</th><th>B</th> <th>C</th></tr>
</thead>
<tbody>
<tr><td>1
A</td><td>1 B</td><td>1 C</td></tr>
<tr><td>2
A</td><td>2 B</td><td>2 C</td></tr>
<tr><td>3
A</td><td>3 B</td><td>3 C</td></tr>
<tr><td>4
A</td><td>4 B</td><td>4 C</td></tr>
<tr><td>5
A</td><td>5 B</td><td>5 C</td></tr>
</tbody>
</table>
</body>
</html>
0 komentar:
Posting Komentar