Basic Navigation

HTML

<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>

CSS

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 {
  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;   
}