Februari 13, 2011

Navigation Menu Sederhana Dengan CSS

Karena Navigation Menu Ini Hanya Menggunakan CSS, Kita Letakkan Dulu Kode CSSnya. "Letakkan di Atas Kode ]]></b:skin>" #...

Karena Navigation Menu Ini Hanya Menggunakan CSS, Kita Letakkan Dulu Kode CSSnya. "Letakkan di Atas Kode ]]></b:skin>"

#nav {
background:#000;
color:#fff;
float:left;
width:97%;
font-size:14px;
margin:0 auto;
padding:0px 15px;
overflow:hidden;
}
#nav ul {
list-style:none;
float:left;
margin:0;
padding:0;
}
#nav li {
list-style: none;
margin-left:0px;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #fff;
display: block;
margin: 0;
padding: 10px 16px;
}
#nav li a:hover, #nav li a:active, #nav li a:focus {
background:#fff;
color:#000;
margin: 0;
padding: 10px 16px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#fff;
width: 150px;
color:#000;
font-weight:normal;
float: none;
margin: 0;
padding: 8px 10px;
}
#nav li li a:hover, #nav li li a:active {
background:#000;
color:#fff;
padding: 8px 10px;
-moz-border-radius:0;
-webkit-border-radius:0;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

CSS Navigation Menu yang Saya Berikan Sangan Sederhana. Dan Untuk Membuatnya Lebih dari Sederhana, Designlah Kode CSS Tersebut dengan Design Kreatif Kamu!
Setelah Itu, Barulah Kita Dapat Menggunakannya, Dengan Meletakkan Kode di Bawah Ini di Tempat yang Kamu Inginkan (di HTML/JavaScript).

<div id='nav'>
<ul>
<li><a href='Alamat Link'>Menu 1</a></li>
<li><a href='Alamat Link'>Menu 2</a></li>
<li><a href='Alamat Link'>Menu 3</a>
<ul>
<li><a href='Alamat Link'>Sub Menu 3</a></li>
<li><a href='Alamat Link'>Sub Menu 3</a></li>
<li><a href='Alamat Link'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='Alamat Link'>Menu 4</a>
<ul>
<li><a href='Alamat Link'>Sub Menu 4</a></li>
<li><a href='Alamat Link'>Sub Menu 4</a></li>
<li><a href='Alamat Link'>Sub Menu 4</a></li>
</ul>
</li>
</ul>
</div>