Cara Pasang Dark Style LavaLamp Drop Down Menu

Setelah membuat menu Versi Dark Style Css Drop Down Vertical, tentunya kurang lengkap tanpa dengan Versi Drop Down. Tampilannya juga tidak kalah dengan menu-menu lainnya, terlepas nanti sobat ingin pakai atau tidak di blog tercinta ada baiknya nyimak dulu atau di simpan dulu karena mungkin suatu saat mau di coba.

D E M O





Cara Pasang
Pertama
SIlahkan menuju Dasbord lalu klik Template --->Edit HTML

Silahkan Cari kode ]]>

Letakkan Code berikut diatas ]]>

/* Flying Css3 menu www.kumpulancara.com*/    .container {            margin: 30px auto;      width: 957px;}    #nav,#nav ul {      list-style: none outside none;      margin: 0;      padding: 0;}  #nav {      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqQx8D-YVvyo6Y4P1x4a6jDQ4TLPTlwYYz1GEKvYsAQcLL5AJA7Rh_SnjSwmvHtu2ZdVGVEza5baHmL45_QknLvQ1buRRhO_LBi4VJcqUbKqMH7AU9M01j0M5VsZlt0I2QZznKAlB-7E/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;      clear: both;      font-size: 12px;      height: 58px;      padding: 0 0 0 9px;      position: relative;      width: 957px;}  #nav ul {      background-color: #222;      border:1px solid #222;      border-radius: 0 5px 5px 5px;      border-width: 0 1px 1px;      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);      left: -9999px;      overflow: hidden;      position: absolute;      top: -9999px;      z-index: 2;      -moz-transform-origin: 0 0;      -ms-transform-origin: 0 0;      -o-transform-origin: 0 0;      -webkit-transform-origin: 0 0;      transform-origin: 0 0;      -moz-transition: -moz-transform 0.1s linear;      -ms-transition: -ms-transform 0.1s linear;      -o-transition: -o-transform 0.1s linear;      -webkit-transition: -webkit-transform 0.1s linear;      transition: transform 0.1s linear;  }  #nav li {      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLzufrVJoSVouSUsEMdPM0-bqCBqYLmQvaO1bDtIV0BPci5xibL9djJoofGLbjHxS-s6R-n1hev2aCeoIb7OppHAVOHvIx0VPc8bkWrIiCOjpDMm8l1B0GgjVLkA7ID-uzIunId_52eY/s1600/menu_line.png') no-repeat scroll right 5px transparent;      float: left;      position: relative;}  #nav li a {      color: #FFFFFF;      display: block;      float: left;      font-weight: normal;      height: 30px;      padding: 23px 20px 0;      position: relative;      text-decoration: none;      text-shadow: 1px 1px 1px #000000;  }  #nav li:hover > a {      color: #00B4FF;  }  #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {      background: none repeat scroll 0 0 #121212;      outline: 0 none;  }  #nav li:hover ul.subs {      left: 0;      top: 53px;      width: 180px;      -moz-transform: scaleY(1);      -ms-transform: scaleY(1);      -o-transform: scaleY(1);      -webkit-transform: scaleY(1);      transform: scaleY(1);}  #nav ul li {      background: none;      width: 100%;}  #nav ul li a {      float: none;}  #nav ul li:hover > a {      background-color: #121212;      color: #00B4FF;}  #lavalamp {      background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTtIKFMWvrWA9WRnd0W1WhkD34bXnoHcl9mPNUeVhs4-4kUD1JgXvaElMjbjS7q1ae1YNPOgzlFfluI2eAKqGb47m8gCttJ8YmCF6xLahHTf9olZWA9zb3j7tJgeZd0SkzpXQSVhVctmY/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;      height: 16px;      left: 13px;      position: absolute;      top: 0px;      width: 64px;      -moz-transition: all 300ms ease;      -ms-transition: all 300ms ease;      -o-transition: all 300ms ease;      -webkit-transition: all 300ms ease;      transition: all 300ms ease;  }  #lavalamp:hover {      -moz-transition-duration: 3000s;      -ms-transition-duration: 3000s;      -o-transition-duration: 3000s;      -webkit-transition-duration: 3000s;      transition-duration: 3000s;  }  #nav li:nth-child(1):hover ~ #lavalamp {      left: 13px;  }  #nav li:nth-child(2):hover ~ #lavalamp {      left: 90px;  }  #nav li:nth-child(3):hover ~ #lavalamp {      left: 170px;  }  #nav li:nth-child(4):hover ~ #lavalamp {      left: 250px;  }  #nav li:nth-child(5):hover ~ #lavalamp {      left: 330px;  }  #nav li:nth-child(6):hover ~ #lavalamp {      left: 410px;  }  #nav li:nth-child(7):hover ~ #lavalamp {      left: 490px;  }  #nav li:nth-child(8):hover ~ #lavalamp {      left: 565px;  }

Silahkan di Simpan

Kedua
Sobat Sebaiknya pasang Menu ini pada widget di kiri atau kanan Blog supaya terlihat serasi.

Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript

Masukkanlah Code berikut kedalamnya

  
                
                  
Home
                  
Menu 1                      
                          
Submenu 1
                          
Submenu 2
                          
Submenu 3
                          
Submenu 4
                          
Submenu 5
                      
                  
                  
Menu 2                      
                          
Submenu 2-1
                          
Submenu 2-2
                          
Submenu 2-3
                          
Submenu 2-4
                          
Submenu 2-5
                          
Submenu 2-6
                          
Submenu 2-7
                          
Submenu 2-8
                      
                  
                  
Menu 3                      
                          
Submenu 3-1
                          
Submenu 3-2
                          
Submenu 3-3
                          
Submenu 3-4
                          
Submenu 3-5
                      
                  
                  
Menu 4
                  
Menu 5
                  
Menu 6
                  
Back
                  
              
            
  

Silahhkan Ganti Code # dengan Link Blog anda dan Menu List dengan Nama Menunya

reff : http://www.kumpulancara.com/2013/01/cara-pasang-dark-style-lavalamp-drop.html

Related video : Cara Pasang Dark Style LavaLamp Drop Down Menu