How To Make Dropdown Menu With CSS (Basic)

Hey Guys. Now I will tell how to make a dropdown menu. You know menu on the website is useful to simplify we explore the website. Check it out.


HTML

<nav id="nav">
 <ul>
 <li><a href="#">Beranda</a></li>
 <li><a href="#">Profil</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
 </li>
 <li><a href="#">Jurnal</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
 </li>
 <li><a href="#">Komentar</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a>
 <ul>
 <li><a href="#">Submenu 2.1</a></li>
 <li><a href="#">Submenu 2.2</a></li>
 <li><a href="#">Submenu 2.3</a></li>
 <li><a href="#">Submenu 2.4</a></li>
 </ul>
 </li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 </ul>
 </li>
 </ul>
</nav>

CSS

#nav {
 background-color:black;
 color:white;
 font:normal 10px Arial,Sans-Serif;
 text-transform:uppercase;
}
#nav ul {
 margin:0px 0px;
 padding:0px 0px;
 height:30px;
}
#nav li {
 margin:0px 0px;
 padding:0px 0px;
 float:left;
 display:inline;
 list-style:none;
 position:relative;
}
#nav a {
 display:block;
 padding:0px 15px;
 line-height:30px;
 text-decoration:none;
 background-color:black;
 color:white;
}
#nav a:hover {
 background-color:darkblue;
}
#nav li ul {
 width:170px;
 height:auto;
 position:absolute;
 top:100%;
 left:0px;
 z-index:10;
 display:none;
}
#nav li li {
 display:block;
 float:none;
}
#nav li:hover > ul {
 display:block;
}
#nav li ul ul {
 left:100%;
 top:0px;
}

Well easy right. You can also download the full version using Javascript. Download Here.