Home CSS CSS Navigation Menu Navigation 8 Style CSS DropDown Menu Blogger

8 Style CSS DropDown Menu Blogger

Under88 - Lagi-lagi dan lagi...??? ya itu lah yang pantas di katakan sekerang.. karena sudah beberapa hari ini saya membahas tutorial navigasimenu... Namun kali ini saya tidak akan memberikan secara rinci membuat navigation karena itu akan di bahasa pada cara membuat css menu navigation part2 yang sebelumnya sudah saya bahas cara membuat css menu navigation part1, Untuk kali ini kita langsung saja ke cara pemasangan dengan 8 style varian berbeda . Tutorial ini sudah pernah di bahas oleh bang taufik nurrohman namun sekali lagi kita akan membuat menu ini lebih mudah untuk di pasang dengan beberapa pilihan style yang bisa langsung di pasang di blogger anda.

Lihat demonya dulu ya... :

View Page Demo

CARA MEMASANG DI BLOGGER

1. Pertama sebuah markup HTML yang Berupa gaya submenu 4tingkat.

masukan code di antara header dan conten-wrapper atau di taruh di bawah header ,ya sesuakain saja di mana harusnya ini di letakan.. bisa juga di simpan pada widget baru dengan memilih elemen HTML/Javascript .

<nav>
<ul>
 <li><a href="#">Beranda</a></li>
 <li><a href="#">Profil</a></li>
 <li class="sub"><a href="#">Jurnal</a>
<ul>
 <li><a href="#">2000</a></li>
 <li><a href="#">2001</a></li>
 <li class="sub"><a href="#">2002</a>
<ul>
  <li><a href="#">21 April</a></li>
  <li><a href="#">22 April</a></li>
  <li class="sub"><a href="#">23 April</a>
<ul>
  <li><a href="#">Senin</a></li>
  <li><a href="#">Selasa</a></li>
  <li><a href="#">Rabu</a></li>
  <li><a href="#">Kamis</a></li>
</ul>
 </li>
  <li><a href="#">24 April</a></li>
  <li><a href="#">25 April</a></li>
</ul>
 </li>
 <li><a href="#">2003</a></li>
 <li><a href="#">2004</a></li>
</ul>
 </li>
 <li><a href="#">Komentar</a></li>
 <li><a href="#">Kontak</a></li>
</ul>
</nav>

2. Meletakan style CSS di atas code ]]></b:skin> .. Pilih CSS yang di ingikan cukup klik centang untuk melihat :

Style 1 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0A8603; background:-webkit-linear-gradient(top,#0A8603,#1F6A1C); background:-moz-linear-gradient(top,#0A8603,#1F6A1C); background:-ms-linear-gradient(top,#0A8603,#1F6A1C); background:-o-linear-gradient(top,#0A8603,#1F6A1C); background:linear-gradient(top,#0A8603,#1F6A1C); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0A8603; background:-webkit-linear-gradient(bottom,#0A8603,#1F6A1C); background:-moz-linear-gradient(bottom,#0A8603,#1F6A1C); background:-ms-linear-gradient(bottom,#0A8603,#1F6A1C); background:-o-linear-gradient(bottom,#0A8603,#1F6A1C); background:linear-gradient(bottom,#0A8603,#1F6A1C)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; height:auto; visibility:hidden; opacity:0; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#F1B215 transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #F1B215; position:absolute; top:16px; right:10px}

Style 2 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#900; background:-webkit-linear-gradient(top,#900,#700); background:-moz-linear-gradient(top,#900,#700); background:-ms-linear-gradient(top,#900,#700); background:-o-linear-gradient(top,#900,#700); background:linear-gradient(top,#900,#700); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.2); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#900; background:-webkit-linear-gradient(bottom,#900,#700); background:-moz-linear-gradient(bottom,#900,#700); background:-ms-linear-gradient(bottom,#900,#700); background:-o-linear-gradient(bottom,#900,#700); background:linear-gradient(bottom,#900,#700)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#F1B215 transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #F1B215; position:absolute; top:16px; right:10px}

Style 3 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#0054BB; background:-webkit-linear-gradient(top,#0054BB,#175093); background:-moz-linear-gradient(top,#0054BB,#175093); background:-ms-linear-gradient(top,#0054BB,#175093); background:-o-linear-gradient(top,#0054BB,#175093); background:linear-gradient(top,#0054BB,#175093); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#0054BB; background:-webkit-linear-gradient(bottom,#0054BB,#175093); background:-moz-linear-gradient(bottom,#0054BB,#175093); background:-ms-linear-gradient(bottom,#0054BB,#175093); background:-o-linear-gradient(bottom,#0054BB,#175093); background:linear-gradient(bottom,#0054BB,#175093)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#eee transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #eee; position:absolute; top:16px; right:10px}

Style 4 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#fff; background:-webkit-linear-gradient(top,#fff,#ddd); background:-moz-linear-gradient(top,#fff,#ddd); background:-ms-linear-gradient(top,#fff,#ddd); background:-o-linear-gradient(top,#fff,#ddd); background:linear-gradient(top,#fff,#ddd); height:40px; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2); -moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2); box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2)}
nav li a:active{background:#fff; background:-webkit-linear-gradient(bottom,#fff,#ddd); background:-moz-linear-gradient(bottom,#fff,#ddd); background:-ms-linear-gradient(bottom,#fff,#ddd); background:-o-linear-gradient(bottom,#fff,#ddd); background:linear-gradient(bottom,#fff,#ddd)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#0266C8 transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #0266C8; position:absolute; top:16px; right:10px}

Style 5 :

DEMO

Centang untuk melihat CSS

nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#DE9000; background:-webkit-linear-gradient(top,#E9A72E,#DE9000); background:-moz-linear-gradient(top,#E9A72E,#DE9000); background:-ms-linear-gradient(top,#E9A72E,#DE9000); background:-o-linear-gradient(top,#E9A72E,#DE9000); background:linear-gradient(top,#E9A72E,#DE9000); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{-webkit-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2); -moz-box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2); box-shadow:inset 0px 0px 30px rgba(0,0,0,0.2)}
nav li a:active{background:#E9A72E; background:-webkit-linear-gradient(bottom,#E9A72E,#DE9000); background:-moz-linear-gradient(bottom,#E9A72E,#DE9000); background:-ms-linear-gradient(bottom,#E9A72E,#DE9000); background:-o-linear-gradient(bottom,#E9A72E,#DE9000); background:linear-gradient(bottom,#E9A72E,#DE9000)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#fff transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #fff; position:absolute; top:16px; right:10px}

Style 6 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#E56AC6; background:-webkit-linear-gradient(top,#FE9DE4,#E56AC6); background:-moz-linear-gradient(top,#FE9DE4,#E56AC6); background:-ms-linear-gradient(top,#FE9DE4,#E56AC6); background:-o-linear-gradient(top,#FE9DE4,#E56AC6); background:linear-gradient(top,#FE9DE4,#E56AC6); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.1),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(255,255,255,0.1)}
nav li a:active{background:#FE9DE4; background:-webkit-linear-gradient(bottom,#FE9DE4,#E56AC6); background:-moz-linear-gradient(bottom,#FE9DE4,#E56AC6); background:-ms-linear-gradient(bottom,#FE9DE4,#E56AC6); background:-o-linear-gradient(bottom,#FE9DE4,#E56AC6); background:linear-gradient(bottom,#FE9DE4,#E56AC6)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#fff transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #fff; position:absolute; top:16px; right:10px}

Style 7 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#BC03BC; background:-webkit-linear-gradient(top,#BC03BC,#AD05AD); background:-moz-linear-gradient(top,#BC03BC,#AD05AD); background:-ms-linear-gradient(top,#BC03BC,#AD05AD); background:-o-linear-gradient(top,#BC03BC,#AD05AD); background:linear-gradient(top,#BC03BC,#AD05AD); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.2),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#111; text-shadow:0px 1px 0px rgba(255,255,255,0.3); display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#AD05AD; background:-webkit-linear-gradient(bottom,#BC03BC,#AD05AD); background:-moz-linear-gradient(bottom,#BC03BC,#AD05AD); background:-ms-linear-gradient(bottom,#BC03BC,#AD05AD); background:-o-linear-gradient(bottom,#BC03BC,#AD05AD); background:linear-gradient(bottom,#BC03BC,#AD05AD)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#F1B215 transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #F1B215; position:absolute; top:16px; right:10px}

Style 8 :

DEMO

Centang untuk melihat CSS

nav{font:bold 16px Calibri,Arial,Sans-Serif}
nav *{margin:0 0 0 0; padding:0 0 0 0; list-style:none}
nav ul{background:#333; background:-webkit-linear-gradient(top,#444,#333); background:-moz-linear-gradient(top,#444,#333); background:-ms-linear-gradient(top,#444,#333); background:-o-linear-gradient(top,#444,#333); background:linear-gradient(top,#444,#333); height:40px; -webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.1),0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.1),0px 1px 3px rgba(0,0,0,0.4); box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4),inset 0px 2px 0px rgba(255,255,255,0.1),0px 1px 3px rgba(0,0,0,0.4)}
nav li{float:left; display:inline}
nav li a{padding:0px 15px; line-height:40px; color:#999; text-shadow:0px -1px 0px #111; display:block; text-decoration:none; -webkit-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1); box-shadow:inset 1px 0px 0px rgba(255,255,255,0.1),inset -1px 0px 0px rgba(0,0,0,0.1)}
nav li a:hover{background:rgba(0,0,0,0.1)}
nav li a:active{background:#555; background:-webkit-linear-gradient(bottom,#555,#333); background:-moz-linear-gradient(bottom,#555,#333); background:-ms-linear-gradient(bottom,#555,#333); background:-o-linear-gradient(bottom,#555,#333); background:linear-gradient(bottom,#555,#333)}
nav li ul{display:block; width:170px; position:absolute; left:auto; z-index:10; visibility:hidden; opacity:0; height:auto; -webkit-transition:all 0.26s ease-out 0.2s; -moz-transition:all 0.26s ease-out 0.2s; -ms-transition:all 0.26s ease-out 0.2s; -o-transition:all 0.26s ease-out 0.2s; transition:all 0.26s ease-out 0.2s}
nav li li{display:block; float:none; width:100%}
nav li:hover >ul{visibility:visible; width:200px; opacity:1}
nav li li ul{left:200px; margin-top:-40px}
nav li.sub >a{position:relative; padding-right:30px}
nav li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:#F1B215 transparent transparent transparent; position:absolute; top:20px; right:10px}
nav li.sub li.sub >a:after{content:""; width:0px; height:0px; border-width:4px; border-style:solid; border-color:transparent transparent transparent #F1B215; position:absolute; top:16px; right:10px}

Berkomentar adalah hal yang paling baik untuk membangun sebuah kreativitas, maka dari itu saya harap anda bisa memberikan kritik dan saran.. dan semoga artikel ini bisa bermanfaat buat anda.. terima kasih " wassalam "...

Pages

8 Style CSS DropDown Menu Blogger

CARA MEMASANG DI BLOGGER

Style 1 :

Style 2 :

Style 3 :

Style 4 :

Style 5 :

Style 6 :

Style 7 :

Style 8 :

Related Post

0 komentar:

Posting Komentar