Social Icons

Rabu, 18 Desember 2013

CSS Mouse Hover

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