Free Horizontal Drop Down Menu for Blogger Page 1

Berikut ini beberapa kode Drop Down menu gratis yang tentunya bukanlah karya saya melainkan saya temukan dan kumpulkan dari Blog sahabat lainnya.

Here are some free code of Drop Down menu that certainly is not my work, but I found and collected from other site. Hope you like them.

Light Opera DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
    • Sub1 Galih1
    • Sub2 Galih1
  • Galih2
    • Sub1 Galih2
    • Sub2 Galih2
• Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenLO ul,#cssmenLO li,#cssmenLO span,#cssmenLO a{margin:0;padding:0;position:relative}#cssmenLO{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenLO:after,#cssmenLO ul:after{content:'';display:block;clear:both}#cssmenLO a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenLO ul{list-style:none}#cssmenLO > ul{float:left}#cssmenLO > ul > li{float:left}#cssmenLO > ul > li > a{color:#000;font-size:12px}#cssmenLO > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenLO > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenLO > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenLO > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenLO > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenLO .has-sub{z-index:1}#cssmenLO .has-sub:hover > ul{display:block}#cssmenLO .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenLO .has-sub ul li{*margin-bottom:-1px}#cssmenLO .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenLO .has-sub ul li:hover a{background:#a80008}#cssmenLO .has-sub .has-sub:hover > ul{display:block}#cssmenLO .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenLO .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenLO .has-sub .has-sub ul li a:hover{background:#8f0007}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenLO"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li class="has-sub"><a href="#"><span>Galih1</span></a> <ul> <li><a href="#"><span>Sub1 Galih1</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih1</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Galih2</span></a> <ul> <li><a href="#"><span>Sub1 Galih2</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Gasendra</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Animated CSS3 DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
    • Sub1 Galih1
    • Sub2 Galih1
  • Galih2
    • Sub1 Galih2
    • Sub2 Galih2
• Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenAC ul{margin:0;padding:0}#cssmenAC li{margin:0;padding:0}#cssmenAC a{margin:0;padding:0}#cssmenAC ul{list-style:none}#cssmenAC a{text-decoration:none}#cssmenAC{height:70px;background-color:#232323;box-shadow:0 2px 3px rgba(0,0,0,0.4);width:auto}#cssmenAC > ul > li{float:left;margin-left:15px;position:relative}#cssmenAC > ul > li > a{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenAC > ul > li > a:hover{color:#fff}#cssmenAC > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenAC > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenAC > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenAC > ul ul > li{position:relative}#cssmenAC ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}#cssmenAC ul ul a:hover{background-color:#f0f0f0}#cssmenAC ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenAC ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenAC ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenAC"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li class="has-sub"><a href="#"><span>Galih1</span></a> <ul> <li><a href="#"><span>Sub1 Galih1</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih1</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Galih2</span></a> <ul> <li><a href="#"><span>Sub1 Galih2</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Gasendra</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Colored Tab DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
    • Sub1 Galih1
    • Sub2 Galih1
  • Galih2
    • Sub1 Galih2
    • Sub2 Galih2
• Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">@charset 'UTF-8';#cssmenuCT{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenuCT > ul{margin-top:6px !important}#cssmenuCT ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid #A8A8A8;-webkit-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenuCT ul ul{border-top:6px solid #a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenuCT ul ul a{line-height:43px}#cssmenuCT ul ul ul{left:100%;top:0}#cssmenuCT li{float:left;padding:0 8px}#cssmenuCT li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenuCT li a:hover{color:#000;text-decoration:none}#cssmenuCT li ul{background:#e0e0e0;border-left:2px solid #a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenuCT li:hover > ul{display:block}#cssmenuCT li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenuCT li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenuCT li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenuCT p{clear:left}#cssmenuCT .active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0 #a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenuCT .active > a:hover{color:white}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuCT"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih/span></a> <ul> <li class="has-sub"><a href="#"><span>Galih1</span></a> <ul> <li><a href="#"><span>Sub1 Galih1</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih1</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Galih2</span></a> <ul> <li><a href="#"><span>Sub1 Galih2</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Gasendra</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Black Apple DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenuBA ul,#cssmenuBA li,#cssmenuBA span,#cssmenuBA a{margin:0;padding:0;position:relative}#cssmenuBA:after,#cssmenuBA ul:after{content:'';display:block;clear:both}#cssmenuBA a{color:#fff;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #333}#cssmenuBA ul{list-style:none}#cssmenuBA > ul > li{float:left}#cssmenuBA > ul > li.active a{background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g4MUiASxLKPWOwFrs59XFH0Erkpf87PQQUp-WOPKGaeVJAwIAGfGLmu8bv4mGI4kyBCqNvbbVB8qlH_VWvk16Rz3Y03aRjBoIHgIZkBLNcs-DMTzXB8Zsc4zzS2965F5p8KwzIlsOLam/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-moz-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;-webkit-box-shadow:inset 0 0 10px #222,inset 0 10px 10px #222;filter:none}#cssmenuBA > ul > li.active a:hover{background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(100%,#4a4a4a));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#646464',endColorstr='#4a4a4a',GradientType=0);filter:none}#cssmenuBA > ul > li a{box-shadow:inset 0 0 0 1px #8a8a8a;-moz-box-shadow:inset 0 0 0 1px #8a8a8a;-webkit-box-shadow:inset 0 0 0 1px #8a8a8a;background:#4a4a4a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g4MUiASxLKPWOwFrs59XFH0Erkpf87PQQUp-WOPKGaeVJAwIAGfGLmu8bv4mGI4kyBCqNvbbVB8qlH_VWvk16Rz3Y03aRjBoIHgIZkBLNcs-DMTzXB8Zsc4zzS2965F5p8KwzIlsOLam/s1600/grad_dark.png) repeat-x left top;background:-moz-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8a8a8a),color-stop(50%,#707070),color-stop(51%,#626262),color-stop(100%,#787878));background:-webkit-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-o-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:-ms-linear-gradient(top,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);background:linear-gradient(to bottom,#8a8a8a 0%,#707070 50%,#626262 51%,#787878 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);border-bottom:1px solid #5d5d5d;border-top:1px solid #5d5d5d;border-right:1px solid #5d5d5d;line-height:34px;padding:0 35px;filter:none}#cssmenuBA > ul > li a:hover{background:#8a8a8a url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6g4MUiASxLKPWOwFrs59XFH0Erkpf87PQQUp-WOPKGaeVJAwIAGfGLmu8bv4mGI4kyBCqNvbbVB8qlH_VWvk16Rz3Y03aRjBoIHgIZkBLNcs-DMTzXB8Zsc4zzS2965F5p8KwzIlsOLam/s1600/grad_dark.png) repeat-x left bottom;background:-moz-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#646464),color-stop(50%,#4a4a4a),color-stop(51%,#3b3b3b),color-stop(100%,#525252));background:-webkit-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-o-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:-ms-linear-gradient(top,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);background:linear-gradient(to bottom,#646464 0%,#4a4a4a 50%,#3b3b3b 51%,#525252 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a',endColorstr='#787878',GradientType=0);filter:none}#cssmenuBA > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #5d5d5d}#cssmenuBA > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenuBA .has-sub:hover ul{display:block}#cssmenuBA .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;/* IE7 */ *width:100%}#cssmenuBA .has-sub ul li{text-align:center}#cssmenuBA .has-sub ul li a{border-top:0 none;border-left:1px solid #5d5d5d;display:block;line-height:120%;padding:9px 5px;text-align:center}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuBA"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Apple CSS3 DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra2
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenuACSS ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWO5r5n-DVvilM_CsMB5VyngqMTwGwyqPJ2lXtt-ztwL0EkQZFfsvDJUwEKWzs4_o1TwdUsccPPU4eHhtgViEbWcy_qIeDlS-lKLSBUsdPDaiPb2ySnVL_qBVAkMW29A0-Kb_2rXSj4I2/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenuACSS li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenuACSS a,#cssmenuACSS a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenuACSS a:hover{background:#000;color:#fff}#cssmenuACSS .active a,#cssmenuACSS li:hover > a{background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWO5r5n-DVvilM_CsMB5VyngqMTwGwyqPJ2lXtt-ztwL0EkQZFfsvDJUwEKWzs4_o1TwdUsccPPU4eHhtgViEbWcy_qIeDlS-lKLSBUsdPDaiPb2ySnVL_qBVAkMW29A0-Kb_2rXSj4I2/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWO5r5n-DVvilM_CsMB5VyngqMTwGwyqPJ2lXtt-ztwL0EkQZFfsvDJUwEKWzs4_o1TwdUsccPPU4eHhtgViEbWcy_qIeDlS-lKLSBUsdPDaiPb2ySnVL_qBVAkMW29A0-Kb_2rXSj4I2/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenuACSS ul ul li:hover a,#cssmenuACSS li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenuACSS ul ul a:hover{background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWO5r5n-DVvilM_CsMB5VyngqMTwGwyqPJ2lXtt-ztwL0EkQZFfsvDJUwEKWzs4_o1TwdUsccPPU4eHhtgViEbWcy_qIeDlS-lKLSBUsdPDaiPb2ySnVL_qBVAkMW29A0-Kb_2rXSj4I2/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenuACSS li:hover > ul{display:block}#cssmenuACSS ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivWO5r5n-DVvilM_CsMB5VyngqMTwGwyqPJ2lXtt-ztwL0EkQZFfsvDJUwEKWzs4_o1TwdUsccPPU4eHhtgViEbWcy_qIeDlS-lKLSBUsdPDaiPb2ySnVL_qBVAkMW29A0-Kb_2rXSj4I2/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenuACSS ul ul li{float:none;margin:0;padding:3px}#cssmenuACSS ul ul a,#cssmenuACSS ul ul a:link{font-weight:normal;font-size:12px}#cssmenuACSS ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenuACSS ul{height:1%}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuACSS"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Red & Grey Rough DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra2
• Contact

[Show Code][Hide Code]
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#cssmenuRGR,#cssmenuRGR > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVF5bEUe79S7hTDz3DnFIz_nQYFDn5VEzYy0CzkrC0dC2KaPRpf6c-rqQAtyxLCqX1sfltZaxV6RJUtG6zj5NhSbJiWhoh7IIi6l-gtRanUdjkmblTD_mG5murrjXtQNs6pl55YNTOkU7K/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenuRGR:before,#cssmenuRGR:after,#cssmenuRGR > ul:before,#cssmenuRGR > ul:after{content:'';display:table}#cssmenuRGR:after,#cssmenuRGR > ul:after{clear:both}#cssmenuRGR{width:auto;zoom:1}#cssmenuRGR > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm2UU6datwl4s0mqU5zwAX1aTOxd2ZpgML-QlkjVZNXevVim1OeTkBTuA6LVtcGBSlVfVLk4_Gz4-zR2US4jTYp8LRddO9TVYlrUCRScQwTC2c4wZAP2VMuBu2hdc_lvgjYR7PsWuVapn/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenuRGR > ul li{margin:0;padding:0;list-style:none}#cssmenuRGR > ul > li{float:left;position:relative}#cssmenuRGR > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #9e3825;text-shadow:0 -1px 0 rgba(116,37,2,0.7);line-height:18px}#cssmenuRGR > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9b-BvevYfwAIAoCx64S7IH6IWWH46TsxKz3W9t12kb3Xa4omyyNmfM1PJ3vRBvhQLCND9dfDes3UVuMpYL-OuqiQjkZ_rNGR6XOVdtOybgjWL7Fo8tUn63TyYcjGaPSEl-u8GCJb11hIS/s1600/hover.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenuRGR > ul > li > a > span{line-height:18px}#cssmenuRGR > ul > li.active > a,#cssmenuRGR > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBNTqv5yUn96JQgeAHa9zO8tBKbWOSqQeVATTDLpRvpvRlPpxXQ4koQeHw_iUAZSAC743UEx5dXl3BqiMGVxAECZI2WLJ_KB-9RngLO9EegzeVfy1OaBRkTkohvAA-J3Fl7bmvCW8wqgup/s1600/active.png) repeat}/* Childs */#cssmenuRGR > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVF5bEUe79S7hTDz3DnFIz_nQYFDn5VEzYy0CzkrC0dC2KaPRpf6c-rqQAtyxLCqX1sfltZaxV6RJUtG6zj5NhSbJiWhoh7IIi6l-gtRanUdjkmblTD_mG5murrjXtQNs6pl55YNTOkU7K/s1600/highlight-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenuRGR > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenuRGR > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenuRGR > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenuRGR > ul ul li a{padding:18px 26px;display:block;color:#393939;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;text-shadow:0 1px 0 white}#cssmenuRGR > ul ul li a:hover{border-left:4px solid #de553b;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9b-BvevYfwAIAoCx64S7IH6IWWH46TsxKz3W9t12kb3Xa4omyyNmfM1PJ3vRBvhQLCND9dfDes3UVuMpYL-OuqiQjkZ_rNGR6XOVdtOybgjWL7Fo8tUn63TyYcjGaPSEl-u8GCJb11hIS/s1600/hover.png) repeat;color:white;text-shadow:0 1px 0 black}#cssmenuRGR > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVm2UU6datwl4s0mqU5zwAX1aTOxd2ZpgML-QlkjVZNXevVim1OeTkBTuA6LVtcGBSlVfVLk4_Gz4-zR2US4jTYp8LRddO9TVYlrUCRScQwTC2c4wZAP2VMuBu2hdc_lvgjYR7PsWuVapn/s1600/menu-bg.png) repeat}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuRGR"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Apple Light DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra2
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenuAL ul,#cssmenuAL li,#cssmenuAL span,#cssmenuAL a{margin:0;padding:0;position:relative}#cssmenuAL:after,#cssmenuAL ul:after{content:'';display:block;clear:both}#cssmenuAL a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;min-width:35px;text-align:center;text-decoration:none;text-shadow:0 -1px 0 #eee}#cssmenuAL ul{list-style:none}#cssmenuAL > ul > li{float:left}#cssmenuAL > ul > li.active > a{background:#d9d9d9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuW6ouQ2HFSlrIrWc6_CZJAVWoijkhjvhdvrBYr59_F_O8i0HJ8reB73PWK4q4FuYjYQtmAZpWwcHtmg0voUlhu_nn76OJGx7BkUPO1hqdSkApB9fMnc6q-MkHITPq-f4XrME761fEyl5h/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-moz-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;-webkit-box-shadow:inset 0 0 10px #979797,inset 0 10px 10px #979797;filter:none}#cssmenuAL > ul > li.active a:hover{background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(100%,#bfbfbf));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9',endColorstr='#bfbfbf',GradientType=0);filter:none}#cssmenuAL > ul > li a{box-shadow:inset 0 0 0 1px #fff;-moz-box-shadow:inset 0 0 0 1px #fff;-webkit-box-shadow:inset 0 0 0 1px #fff;background:#bfbfbf url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuW6ouQ2HFSlrIrWc6_CZJAVWoijkhjvhdvrBYr59_F_O8i0HJ8reB73PWK4q4FuYjYQtmAZpWwcHtmg0voUlhu_nn76OJGx7BkUPO1hqdSkApB9fMnc6q-MkHITPq-f4XrME761fEyl5h/s1600/grad_light.png) repeat-x left top;background:-moz-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(50%,#e5e5e5),color-stop(51%,#d7d7d7),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-o-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:-ms-linear-gradient(top,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);background:linear-gradient(to bottom,#fff 0%,#e5e5e5 50%,#d7d7d7 51%,#ededed 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);border-bottom:1px solid #d2d2d2;border-top:1px solid #d2d2d2;border-right:1px solid #d2d2d2;line-height:34px;padding:0 35px;filter:none}#cssmenuAL > ul > li a:hover{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuW6ouQ2HFSlrIrWc6_CZJAVWoijkhjvhdvrBYr59_F_O8i0HJ8reB73PWK4q4FuYjYQtmAZpWwcHtmg0voUlhu_nn76OJGx7BkUPO1hqdSkApB9fMnc6q-MkHITPq-f4XrME761fEyl5h/s1600/grad_light.png) repeat-x left bottom;background:-moz-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d9d9d9),color-stop(50%,#bfbfbf),color-stop(51%,#b0b0b0),color-stop(100%,#c7c7c7));background:-webkit-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-o-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:-ms-linear-gradient(top,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);background:linear-gradient(to bottom,#d9d9d9 0%,#bfbfbf 50%,#b0b0b0 51%,#c7c7c7 100%);filter:progid:dximagetransform.microsoft.gradient(startColorstr='#fff',endColorstr='#ededed',GradientType=0);filter:none}#cssmenuAL > ul > li:first-child a{border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px 0 0 5px;border-left:1px solid #d2d2d2}#cssmenuAL > ul > li:last-child a{border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0}#cssmenuAL .has-sub:hover ul{display:block}#cssmenuAL .has-sub ul{display:none;position:absolute;top:36px;left:-1px;min-width:100%;text-align:center;*width:100%}#cssmenuAL .has-sub ul li{text-align:center}#cssmenuAL .has-sub ul li a{border-top:0 none;border-left:1px solid #d2d2d2;display:block;font-size:12px;line-height:120%;padding:9px 5px;text-align:center}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuAL"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Silver Salmon DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
    • Sub1 Galih
    • Sub2 Galih
  • Galih2
    • Sub1 Galih2
    • Sub2 Galih2
• Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">@charset 'UTF-8';/* Starter CSS for Menu */#cssmenuSS{padding:0;margin:0;border:0}#cssmenuSS ul,#cssmenuSS li{list-style:none;margin:0;padding:0}#cssmenuSS ul{position:relative;z-index:597}#cssmenuSS ul li{float:left;min-height:1px;vertical-align:middle}#cssmenuSS ul li.hover,#cssmenuSS ul li:hover{position:relative;z-index:599;cursor:default}#cssmenuSS ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenuSS ul ul li{float:none}#cssmenuSS ul ul ul{top:0;left:100%}#cssmenuSS ul li:hover > ul{visibility:visible}#cssmenuSS ul ul{margin-top:0}#cssmenuSS a{display:block;line-height:1em;text-decoration:none}#cssmenuSS ul li.last ul{left:auto;right:0}#cssmenuSS ul li.last ul ul{left:auto;right:99.5%}#cssmenuSS:after,#cssmenuSS ul:after{content:'';display:block;clear:both}/* Custom CSS Styles */#cssmenuSS{width:auto;font-family:Helvetica,Arial,sans-serif}#cssmenuSS:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);background-color:#606a77;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4f5864),color-stop(1,#49515b));background-image:-webkit-linear-gradient(top,#4f5864,#49515b);background-image:-moz-linear-gradient(top,#4f5864,#49515b);background-image:-o-linear-gradient(top,#4f5864,#49515b);background-image:linear-gradient(#4f5864,#49515b);-moz-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;-webkit-box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;box-shadow:inset 0 2px 0 #586270,inset 0 1px 0 #6b7888;content:'';display:block;height:8px}#cssmenuSS > ul{border-bottom:1px solid #252A30;border-top:1px solid #252A30;-moz-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 #8799a9,0 1px 1px rgba(0,0,0,0.5);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);background-color:#566171;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6e7d8f),color-stop(1,#404854));background-image:-webkit-linear-gradient(top,#6e7d8f,#404854);background-image:-moz-linear-gradient(top,#6e7d8f,#404854);background-image:-o-linear-gradient(top,#6e7d8f,#404854);background-image:linear-gradient(#6e7d8f,#404854);height:27px;padding:15px 15px 15px 5px}#cssmenuSS > ul > li{margin:0 10px}#cssmenuSS > ul > li.has-sub:hover > a{-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}#cssmenuSS > ul > li:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);background-color:#e2e2e2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#c8c8c8));background-image:-webkit-linear-gradient(top,#fff,#c8c8c8);background-image:-moz-linear-gradient(top,#fff,#c8c8c8);background-image:-o-linear-gradient(top,#fff,#c8c8c8);background-image:linear-gradient(#fff,#c8c8c8)}#cssmenuSS > ul > li.active:hover > a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);background-color:#cb7b72;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f49b8e),color-stop(1,#bd584d));background-image:-webkit-linear-gradient(top,#f49b8e,#bd584d);background-image:-moz-linear-gradient(top,#f49b8e,#bd584d);background-image:-o-linear-gradient(top,#f49b8e,#bd584d);background-image:linear-gradient(#f49b8e,#bd584d)}#cssmenuSS ul a{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);background-color:#c2c2c2;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#f1f1f1),color-stop(1,#a8a8a8));background-image:-webkit-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-moz-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:-o-linear-gradient(top,#f1f1f1,#a8a8a8);background-image:linear-gradient(#f1f1f1,#a8a8a8);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),1px 1px 1px rgba(0,0,0,0.5);color:#3c444d;font-size:12px;line-height:27px;padding:0 20px;position:relative;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,0.4)}#cssmenuSS ul ul{width:170px}#cssmenuSS ul ul a{-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;line-height:150%}#cssmenuSS ul .active > a{color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.4);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);background-color:#c46a60;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ef7260),color-stop(1,#b04c41));background-image:-webkit-linear-gradient(top,#ef7260,#b04c41);background-image:-moz-linear-gradient(top,#ef7260,#b04c41);background-image:-o-linear-gradient(top,#ef7260,#b04c41);background-image:linear-gradient(#ef7260,#b04c41)}#cssmenuSS ul .has-sub{position:relative}#cssmenuSS ul .has-sub ul{-moz-border-radius:0 3px 3px 3px;-webkit-border-radius:0 3px 3px 3px;border-radius:0 3px 3px 3px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;-moz-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);-webkit-box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);box-shadow:0 2px 1px 1px rgba(0,0,0,0.5);background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;background-color:#c3c3c3;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#e9e9e9),color-stop(1,#aaa));background-image:-webkit-linear-gradient(top,#e9e9e9,#aaa);background-image:-moz-linear-gradient(top,#e9e9e9,#aaa);background-image:-o-linear-gradient(top,#e9e9e9,#aaa);background-image:linear-gradient(#e9e9e9,#aaa);padding:3px 0}#cssmenuSS ul .has-sub ul a{background:none;padding:8px 8px 8px 16px;border-bottom:1px solid transparent;text-align:left}#cssmenuSS ul .has-sub ul .has-sub a:after{content:none}#cssmenuSS ul .has-sub li:hover > a{border-bottom:1px solid #1D2024;color:#FFF;background-color:#55616f;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#56606f),color-stop(1,#3f4852));background-image:-webkit-linear-gradient(top,#56606f,#3f4852);background-image:-moz-linear-gradient(top,#56606f,#3f4852);background-image:-o-linear-gradient(top,#56606f,#3f4852);background-image:linear-gradient(#56606f,#3f4852);-moz-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;-webkit-box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;box-shadow:inset 1px 2px 0 #5c6778,inset 0 1px 0 #4e5866;position:relative;text-shadow:0 1px 0 rgba(0,0,0,0.4)}#cssmenuSS ul .has-sub li:hover > a:after{border-left:0 none;background-color:#c35f54;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ea5f51),color-stop(1,#a9463b));background-image:-webkit-linear-gradient(top,#ea5f51,#a9463b);background-image:-moz-linear-gradient(top,#ea5f51,#a9463b);background-image:-o-linear-gradient(top,#ea5f51,#a9463b);background-image:linear-gradient(#ea5f51,#a9463b);-moz-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;-webkit-box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;box-shadow:inset -1px 2px 0 rgba(255,255,255,0.2),inset 0 1px 0 #ce5448;content:'';height:100%;width:6px;position:absolute;right:0;top:0}#cssmenuSS ul .has-sub > a{padding-right:0}#cssmenuSS ul .has-sub > a:after{content:'▼';border-left:1px solid rgba(100,100,100,0.2);color:#5D6A7A;-moz-box-shadow:-1px 0 0 rgba(255,255,255,0.2);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,0.2);box-shadow:-1px 0 0 rgba(255,255,255,0.2);display:inline-block;font-size:9px;margin-left:5px;text-align:center;height:25px;width:24px;text-shadow:0 -1px 0 #101417}#cssmenuSS ul .active > a:after{color:#FFF}#cssmenuSS ul ul a{font-size:12px}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuSS"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li class="has-sub"><a href="#"><span>Galih1</span></a> <ul> <li><a href="#"><span>Sub1 Galih</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Galih2</span></a> <ul> <li><a href="#"><span>Sub1 Galih2</span></a></li> <li class="last"><a href="#"><span>Sub2 Galih2</span></a></li> </ul> </li> </ul> </li> <li><a href="#"><span>Gasendra</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Orange CSS3 DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra
• Contact

[Show Code][Hide Code]
<style type="text/css">/* #F93 *//* #C60 */#cssmenuOC{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenuOC ul{background:#f93;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1);box-shadow:inset 0 16px 0 0 rgba(255,255,255,0.1)}#cssmenuOC li{float:left;padding:0 0 0 15px}#cssmenuOC li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenuOC li a:hover{background:#c60;color:#FFF;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}#cssmenuOC ul li:hover a{background:#c60;color:#FFF;text-decoration:none}#cssmenuOC li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenuOC li:hover ul{display:block}#cssmenuOC li li{display:block;float:none;margin:0;padding:0;width:200px;background:#f93;/*this is where the rounded corners for the dropdown disappears*/}#cssmenuOC li:hover li a{background:none}#cssmenuOC li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenuOC li ul a:hover,#cssmenuOC li ul li:hover a{border:0;color:#FFF;text-decoration:none;background:#c60;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3)}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuOC"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Grey Impression DropDown Menu
 

Preview

• Home
• Galih
  • Galih1
  • Galih2
  • Galih3
• Gasendra
  • Gasendra1
  • Gasendra2
• Contact

[Show Code][Hide Code]
<style type="text/css">#cssmenuGI{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenuGI ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenuGI li{float:left;padding:0}#cssmenuGI li a{background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigpw78rj22tK-5wn-Vi-JrXKKIF2gv3UONfRM7Qf7U9d04z1U14GqNFE0nYhis5biM8PXOZN6jXocHVjFi7t_x3f1n3dqsZ9dMSxjlJ4220VTqQoWE1xFZTy8iH-38aJ05s3IDZWQiG-D7/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenuGI > ul > li > a{color:#ccc}#cssmenuGI ul ul a{color:#ccc}#cssmenuGI li > a:hover,#cssmenuGI ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvpCEIlrKjRPVn_fouTjLlmmPPMmU0RW9SDQjigHumFHyL3RffkMoo9ytsXL7E2yIZPTkOV9Sy_aulc70681bOETx0l_BoML7aE1xc2RTQYapipO3zSr7vh9PIZ8LOMPAFwlzUZvDXyMYn/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenuGI li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenuGI li:hover ul{display:block}#cssmenuGI li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwxRdTS0VOzJB27nV2Aybqy6BpVzeUBgjGYI_BFt90zl31-IZBqYzAGWF-tErMo09Vs6UhnbDueNrot2twb8P7IrGgGdtZFliXpCrU4xHV-GmwdKrQCzi8fsgCqLA1O1lpvnbz1MQLE5Hz/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenuGI li:hover li a{background:none}#cssmenuGI li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenuGI li ul a:hover,#cssmenuGI li ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ecj3fqTiwCCyDloxqv6lOBCpF72mXgQtXUfygelU4yPI3h7fw-p7FPSSnJftYI1P463Y317wAyXJjGpnIvMXO8-aVYyMIp0uACTKy21A3il_Ij4yWZBOZdo70K3tElzeJCjOzkG-EYpt/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenuGI p{clear:left}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuGI"> <ul> <li class="active"><a href="index.html"><span>Home</span></a></li> <li class="has-sub"><a href="#"><span>Galih</span></a> <ul> <li><a href="#"><span>Galih1</span></a></li> <li><a href="#"><span>Galih2</span></a></li> <li class="last"><a href="#"><span>Galih3</span></a></li> </ul> </li> <li class="has-sub"><a href="#"><span>Gasendra</span></a> <ul> <li><a href="#"><span>Gasendra1</span></a></li> <li class="last"><a href="#"><span>Gasendra2</span></a></li> </ul> </li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

Tutorial How to Add Drop Down Menu

Tutorial How to Create Add Adding Cara Membuat Free Gratis Drop Down Horizontal Menu for untuk Blog Blogger Blogspot Wordpress
Source http://cssmenumaker.com/