membuat Menu Drop Down dengan HTML dan CSS


Berikut akan saya posting bagaimana caranya membuat meu drop down di website dengan html dan css.
Langsung aja berikut scriptnya:
A. Script HTML:
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Drop Down Menu</title>
<link href=”drop.css” rel=”stylesheet” type=”text/css”>
<head>
<body>

<div id=”place-nav”>
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Artikel</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Social</a>
<ul>
<li><a href=”#”>Facebook</a></li>
<li><a href=”#”>Google</a>
<ul>
<li><a href=”#”>Google Wave</a></li>
<li><a href=”#”>Google Buzz</a></li>
<li><a href=”#”>Google Plus</a></li>
</ul>
</li>
<li><a href=”#”>Twitter</a></li>
</ul>
</li>
<li><a href=”#”>Portfolio</a></li>
</ul>
</div>
</body>
</html>

B. Script css:
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}

div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}

Nb: script css kasih nama drop.css dan letakkan satu folder dengan file.html

One thought on “membuat Menu Drop Down dengan HTML dan CSS

  1. We’re a bunch of volunteers and starting a new scheme in our community.
    Your website provided us with helpful information to work on.

    You have done an impressive activity and our whole
    neighborhood will probably be thankful to you.

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s