Menu Dropdown Tanpa Edit Html


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 :

Untuk beberapa alasan saya telah mengganti menu ini dengan menu yang baru.

Show the Demo
13 Comments
Related Post

Join the Discussion!

BlogS of Hariyanto
September 25, 2011 9:06 PM | Delete comment

mantabs infonya sobat :) terimakasih sudah berbagi informasi

MW crew
September 26, 2011 6:26 PM | Delete comment

Sama" sobat...thx sudah berkunjung...

LINA ARDINA
October 27, 2011 3:29 AM | Delete comment

keren banget info'y sob....gx ribet...cos aq paling gk sk dg yg ribet"...thx ya untuk pmbelajaran'y....

MW crew
October 30, 2011 10:51 PM | Delete comment

ok...sma" gan...

ngga tampil http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif pas script nya mau di edit malah ilang oomatis :( tinggal style></style nya aja

sakainget
May 23, 2013 11:21 AM | Delete comment

DI COBA TAPI KETUTUP BACK GROUND GMN CRNY SPY TIDAK KETUTU

MWcrew
May 25, 2013 5:45 AM | Delete comment

@sakaingetUpdated!
Silahkan dicoba lagi :D

arif
September 12, 2013 3:56 PM | Delete comment

thanks infonya mantap gan
...

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan