Simple CSS HTML Dropdown menu

Kode HTML

<html>
<head>
<style type="text/css">
/*css declare here*/
</style>
</head>
<body>
<ul id='nav'>
 <li><a href='google.com'>google</a></li>
 <li><a href='mail.yahoo.com'>mail</a>
 <ul>
 <li><a href=''>Ebook</a></li>
 <li><a href=''>download</a></li>
 </ul>
 </li>
 <li><a href=''>kontak</a>
 <ul>
 <li><a href=''>telephone</a></li>
 <li><a href=''>xxx</a></li>
 </ul>
 </li>
</ul>
</body>
</html>

kode css

ul{
margin:0;
padding:0;
list-style: none;
}

ul li {
position:relative;
float:left;
width:100px;
}

li ul {
position:absolute;
top:30px;
display:none;
}

ul li a {
display:block;
text-decoration:none;
line-height:20px;
color:#000;
padding:5px;
background:#cc0;
margin:0 2px;
}

ul li a:hover { background:#66f; }
li:hover ul, li.over ul {display:block;}


Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s