Show the Demo

CSS Dropdown menu will allow users to beautify interface of their blog without many complicated

Melihat trend design blog saat ini yang kebanyakan menggunakan adopsi desain dari windows 8 terutama terletak pada pewarnaan dan bentuk konten dalam blog tersebut, dan oleh karena beberapa alasan tertentu saya mencoba untuk merombak ulang tampilan menu yang lama dengan menu yang satu ini. Tentunya masih menggunakan css dalam pembentukan tampilan konten akan tetapi saya mencoba menerapkan warna Flat UI yang bisa saja dibilang trend masa kini kedalam menu tersebut.

Cara penggunaan nya masih sama dengan widget menu yang lama, yaitu anda hanya memasukkan kode dibawah ini kedalam gadget HTML/JavaScript baru yang sebelumnya sudah anda tambahkan di blog anda.

Code :

<style>
  
/* Dropdown menu *
 * created by : MWcrew 25/05/13 *
 * website : http://mwcrew10.blogspot.com *
 * email : mwafiez@gmail.com *
 */

nav {
    font: 200 1.1em Lato,calibri,sans-serif;
    margin: 100px auto;
    text-align: center;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    background: none repeat scroll 0 0 #08A3D9;
    display: inline-table;
    list-style: none outside none;
    position: relative;
}
nav ul:after {
    clear: both;
    content: "";
    display: block;
}
nav ul li {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
    float: left;
}
nav ul li:hover {
    -moz-transition: all 0.2s ease 0s;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}
nav ul li:hover a {
    -moz-transition: all 0.2s ease 0s;
}
nav ul li a {
    -moz-transition: all 0.2s ease 0s;
    color: #FFFFFF;
    display: block;
    padding: 25px 50px;
    text-decoration: none;
}
nav ul ul {
    background: none repeat scroll 0 0 #39B5E1;
    border-radius: 0 0 0 0;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    float: none;
    position: relative;
}
nav ul ul li a {
    color: #FFFFFF;
    padding: 20px 55px;
}
nav ul ul li a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0);
}
nav ul ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}

</style>
<nav>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Tutorial</a>
   <ul>
    <li><a href="#">JavaScript</a></li>
                <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a>
     <ul>
                      <li><a href="#">CSS3</a></li>
                       <li><a href="#">CSS2</a></li>
                      <li><a href="#">CSS1</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#">Freebies</a>
   <ul>
    <li><a href="#">Templates</a>
                  <ul>
                      <li><a href="#">Blogspot</a></li>
                       <li><a href="#">Wordpress</a></li>
                      <li><a href="#">Joomla</a></li>
     </ul>
                </li>
    <li><a href="#">Wallpapers</a></li>
               <li><a href="#">Font</a></li>
   </ul>
  </li>
 <li><a href="#">Archives</a></li>
</ul>
</nav>

Updated :

Show the Demo