Dropdown pure murni css tanpa javascript efek hover

, ,

Gambar 0.1 Dropdown Pure Css
Dropdown pure css artinya tanpa script murni css, dengan menggunakan efek hover saja. bila blog sobat sudah lambat karena banyak script cara menanggulanginya ya salah satunya pakai menu navigasi tanpa script kaya gini, atau hapus satu persatu script yang gak terlalu berguna. gak kebayang kan kalo visitor kita pergi begitu saja karena nunggu blog loading. nah kali ini saya mau share dropdown murni css. biar tambah cepet blog kita dan yg pasti tambah visitor. cekibrot.

Html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Dropdown pure css - VeriAsha </title>
<style>
*{margin:0;padding:0;}
.nav {
list-style: none;
float: left;
width: 100%;
}
.nav li {
float: left;
position: relative;
}
.nav a {
display: block;
padding: 8px 14px;
color: #bbb;
text-shadow:1px 1px 1px rgba(0,0,0,0.5);
background-color: #333;
text-decoration: none;
}
.nav a:hover {
color: bluesky;
background:#111;
text-decoration: underline;
}

/*--- DROPDOWN ---*/
.nav ul {
background-color: #fff;
background: rgba(255,255,255,0);
list-style: none;
position: absolute;
left: -9999px;
}
.nav ul li {
padding-top: 1px;
float: none;
}
.nav ul a {
white-space: nowrap;
}
.nav li:hover ul {
left: 0;
}
.nav li:hover a {
background-color: #556;
text-decoration: underline;
}
.nav li:hover ul a {
text-decoration: none;
}
.nav li:hover ul li a:hover {
background-color: #333;
}
</style>
</head>
<body>

<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">kategori 1</a></li>
<ul>
<li><a href="#">kategori 2</a></li>
<ul>
<li><a href="#">kategori 3</a></li>
<ul>
<li><a href="#">kategori 4</a></li>
</ul>
</li>
<li><a href="#">Produk</a>
<ul>
<ul>
<li><a href="#">kategori 1</a></li>
<ul>
<li><a href="#">kategori 2</a></li>
<ul>
<li><a href="#">kategori 3</a></li>
<ul>
<li><a href="#">kategori 4</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<</body>
</html>

Preview Demo

Tidak ada komentar:

Posting Komentar

Maaf, fitur koment hanya untuk pengguna akun goggle saja.
Dikarenakan untuk meminimalisir komentar spam.