<nav> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Profil</a></li> <li><a href="#">Arsip</a> <ul> <li><a href="#">2008</a></li> <li><a href="#">2009</a> <ul> <li><a href="#">Januari</a></li> <li><a href="#">Februari</a></li> <li><a href="#">Maret</a></li> </ul> </li> <li><a href="#">2010</a></li> <li><a href="#">2011</a></li> <li><a href="#">2012</a></li> </ul> </li> <li><a href="#">Kontak</a></li> </ul> </nav>
nav { font:bold 11px Arial,Sans-Serif; text-transform:uppercase; } nav ul { background-color:black; color:white; margin:0px 0px; padding:0px 0px; height:30px; } nav li { list-style:none; margin:0px 0px; padding:0px 0px; float:left; display:inline; position:relative; } nav li a { display:block; text-decoration:none; color:#999; line-height:30px; padding:0px 15px; } nav li a:hover, nav li:hover > a { background-color:#009; color:white; } nav li ul { position:absolute; top:100%; left:0px; z-index:99; width:200px; height:auto; display:none; } nav li ul li { float:none; display:block; } nav li ul ul { top:0px; left:100%; } nav li:hover > ul { display:block; }