Karena baru belajar dan belum menguasai secara 100%, maka sederhana saja
Berikut script Html
<textarea>
<html>
<head>
<title>GUDANG ANIME</title>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul class="dropmenu">
<li><a href="#Genre.html">Genre</a>
<ul>
<li><a href="#Fantasy.html">Fantasy</a></li>
<li><a href="#Romance.html">Romance</a></li>
<li><a href="#Sci-Fi.html">Sci-Fi</a></li>
</ul>
</li>
<li><a href="#Tutorial.html">Tutorial</a>
<ul>
<li><a href="#Download.html">Cara download</a></li>
<li><a href="#Putar.html">Cara memutar</a></li>
<li><a href="#Subtittle.html">Edit subtittle</a></li>
</ul>
</li>
<li><a href="#Donasi.html">Donasi</a>
<ul>
<li><a href="#Paypal.html">Paypal</a></li>
<li><a href="#Mandiri.html">Mandiri</a></li>
<li><a href="#BCA.html">BCA</a></li>
</ul>
</li>
</ul>
</body>
</html>
</textarea>
Kemudian berikut script CSS
<textarea>
/* dropmenu */
.dropmenu {
background: #000;
height: 50px;
list-style-type: none;
margin: 0;
padding: 0px;
}
.dropmenu li {
border-right: solid 2px black;
float: left;
height: 50px;
}
.dropmenu li a {
color: #F00;
display: block;
font: 12px Georgia, "Times New Roman", Times, serif, verdana, sans-serif;
font-weight: bold;
padding: 20px 70px;
text-decoration: underline;
}
.dropmenu li:hover { background: #6F0; position: relative; }
.dropmenu li:hover a { text-decoration: none; }
.dropmenu li:hover ul {
background-color: #333;
border: 1px solid #6FC;
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: #9CF;
border: 1px solid transparent;
color: #3C0;
display: block;
font-size: 14px;
height: 20px;
line-height: 18px;
padding: 0px;
text-decoration: none;
text-indent: 5px;
width: 150px;
padding: 3px;
}
.dropmenu li:hover ul li a:hover {
background: #666;
border: solid 1px #666;
color: #666;
height: 18px;
padding: 3px;
}
.dropmenu ul {
left: -9999px;
list-style-type: none;
position: absolute;
top: -9999px;
}
</style>
</textarea>
Atau donwload disini

Tidak ada komentar:
Posting Komentar