Membuat Menu Navigasi Keren dengan CSS3

• 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){
    
}