Beranda > Artikel, Tips dan trik, Website > membuat Menu Drop Down dengan HTML dan CSS

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

About these ads
  1. 29 Mar 2014 pukul 21:47

    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.

  1. No trackbacks yet.

Berikan Balasan

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

Bergabunglah dengan 55 pengikut lainnya.

%d blogger menyukai ini: