Membuat Menu Navigasi Drop Down Yang Keren

Pada artikel sebelumnya saya telah membagikan dua buah menu navigasi. Menu navigasi tersebut dapat anda lihat disini dan disini. Namun kedua menu navigasi itu belum mempunyai efek drop down saat di klik / diarahkan pada salah daftar menunya. Untuk itu, pada kesempatan ini saya berusaha membagikan dan menjelaskan cara membuat menu navigasi drop down dengan menggunakan css. Menu navigasi horizontal yang akan saya bagikan ini saya dapatkan dari artikel blog Line25.

• DEMO

Untuk membuat menu drop down seperti pada demo, kita harus tau dahulu dasar htmlnya. Coba perhatikan susunan html berikut:

<nav>
<ul>
<li>Home</li>
 <li>Tutorial<ul>
  <li>Photoshop</li>
  <li>Illustrator</li>
  <li>Web Design<ul>
     <li>HTML</li>
     <li>CSS</li>
  </ul></li>
 </ul></li>
<li>Articles</li>
<li>Inspiration</li>
</ul>
</nav>

Setelah kita mengetahui dasar html nya, selanjutnya adalah memberikan perintah css pada menu tersebut agar terlihat seperti tampak pada demo. Silahkan copy code dibawah ini dan paste-kan di atas ]]></b:skin> atau </style> (bagi yang sudah valid CSS3).

nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav ul {
 background: #D8D8D8; 
 padding: 0px;
 border-radius: 10px;  
 list-style: none;
 position: relative;
    font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
    display: inline-table;
}
 nav ul:after {content: ""; clear: both; display: block;}
nav ul li { float: left;}
 nav ul li:hover {background: #4b545f;}
  nav ul li:hover a {color: #fff;}
 
 nav ul li a {display: block; padding: 15px 30px;color: #757575; text-decoration: none;}
nav ul ul {background: #5f6975; border-radius: 0px; padding: 0;position: absolute; top: auto;}
 nav ul ul li {float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}
  nav ul ul li a {padding: 15px 30px; color: #fff;} 
   nav ul ul li a:hover {background: #4b545f;}
nav ul ul ul {position: absolute; left: 100%; top:0;}

@media screen and (max-width:768px){
    
}

Tulisan yang berwarna merah tersebut boleh kamu hilangkan, jika kamu ingin membuat menu navigasi tersebut menyesuaikan kondisi lebar template yang kamu gunakan. Silahkan juga atur ukuran padding dan warna yang kamu inginkan.

Masih banyak lagi menu navigasi horizontal lainnya yang tak kalah kerennya. Untuk saat ini saya akhiri dahulu, semoga apa yang kita pelajari hari ini bermanfaat.