Free Horizontal Drop Down Menu for Blogger Page 2

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.

Flat Horizontal 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">@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@charset 'UTF-8';/* Base Styles */#cssmenuFH > ul,#cssmenuFH > ul li,#cssmenuFH > ul ul{list-style:none;margin:0;padding:0}#cssmenuFH > ul{position:relative;z-index:597;float:left}#cssmenuFH > ul li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;padding:10px}#cssmenuFH > ul li.hover,#cssmenuFH > ul li:hover{z-index:599;cursor:default}#cssmenuFH > ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598}#cssmenuFH > ul ul li{float:none}#cssmenuFH > ul li:hover > ul{visibility:visible}/* Align last drop down RTL *//* Theme Styles */#cssmenuFH > ul a:link{text-decoration:none}#cssmenuFH > ul a:active{color:#ffa500}#cssmenuFH li{padding:0;color:#000}#cssmenuFH{font-family:'Lato',sans-serif;width:auto;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background:#1b9bff;font-size:13px;-moz-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);-webkit-box-shadow:inset 0 2px 2px rgba(255,255,255,0.3);box-shadow:inset 0 2px 2px rgba(255,255,255,0.3)}#cssmenuFH > ul{padding:0 5px;-moz-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);box-shadow:inset 0 -2px 2px rgba(0,0,0,0.3);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;display:block;float:none;zoom:1}#cssmenuFH > ul:before{content:'';display:block}#cssmenuFH > ul:after{content:'';display:table;clear:both}#cssmenuFH > ul > li{padding:8px 5px}#cssmenuFH > ul > li > a,#cssmenuFH > ul > li > a:link,#cssmenuFH > ul > li > a:visited{text-shadow:0 -1px 1px #004881;color:#fff;padding:7px 20px;display:block;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}#cssmenuFH > ul > li > a:hover,#cssmenuFH > ul > li:hover > a{background-color:#0082e7}#cssmenuFH li li a{color:#8b8b8b;font-size:13px}#cssmenuFH li li a:hover{color:#5c5c5c;border-color:#5c5c5c}#cssmenuFH ul ul{margin:0 10px;padding:0 10px;float:none;background:#efefef;border:2px solid #1b9bff;border-top:none;right:0;left:0;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 2px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.2);box-shadow:0 2px 3px rgba(0,0,0,0.2)}#cssmenuFH ul > li > ul > li{margin:0 10px 0 0;position:relative;padding:0;float:left}#cssmenuFH ul > li > ul > li > a{padding:10px 20px 10px 10px;display:block}#cssmenuFH ul > li > ul > li.has-sub > a:before{content:'';position:absolute;top:18px;right:6px;border:5px solid transparent;border-top:5px solid #8b8b8b}#cssmenuFH ul > li > ul > li.has-sub > a:hover:before{border-top:5px solid #5c5c5c}#cssmenuFH ul ul ul{width:200px;top:100%;border:2px solid #1b9bff}#cssmenuFH ul ul ul li{float:none}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuFH"> <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>

Platinum Tabbed 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';/* Starter CSS for Flyout Menu */#cssmenuPT{padding:0;margin:0;border:0;width:auto}#cssmenuPT ul,#cssmenuPT ul li,#cssmenuPT ul ul{list-style:none;margin:0;padding:0}#cssmenuPT ul{position:relative;z-index:597;float:left}#cssmenuPT ul li{float:left;min-height:1px;line-height:1em;vertical-align:middle}#cssmenuPT ul li.hover,#cssmenuPT ul li:hover{position:relative;z-index:599;cursor:default}#cssmenuPT ul ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:598;width:100%}#cssmenuPT ul ul li{float:none}#cssmenuPT ul ul ul{top:1px;left:99%}#cssmenuPT ul li:hover > ul{visibility:visible}#cssmenuPT ul ul{top:1px;left:99%}#cssmenuPT ul li{float:none}#cssmenuPT ul ul{margin-top:1px}#cssmenuPT ul ul li{font-weight:normal}/* Custom CSS Styles */#cssmenuPT:after,#cssmenuPT ul:after{content:'';display:block;clear:both}#cssmenuPT a{color:#333;display:inline-block;font-family:'Lucida Grande','Lucida Sans Unicode',Helvetica,Arial,Verdana,sans-serif;font-size:12px;padding:0 20px;text-align:center;text-decoration:none}#cssmenuPT a:hover{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative;top:0}#cssmenuPT ul{background:#e5e5e5;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;list-style:none}#cssmenuPT > ul{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAA3NCSVQICAjb4U/gAAAAHUlEQVQImWN4+vQpEwMDAxMDAwPT////4exBIgYA2loa5nAttNYAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ddd));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ddd 100%);background:linear-gradient(#e5e5e5 0%,#ddd 100%);box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 2px 2px 1px rgba(0,0,0,0.3);padding-top:5px;width:100%}#cssmenuPT > ul > li{float:left;padding:0 10px;position:relative}#cssmenuPT > ul > li:hover > a{background:#f6f6f6;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;box-shadow:0 2px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 2px 3px rgba(0,0,0,0.1);-webkit-box-shadow:0 2px 3px rgba(0,0,0,0.1);position:relative}#cssmenuPT > ul > li a{line-height:35px}#cssmenuPT > ul > li a:hover{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenuPT .has-sub:hover ul{display:block}#cssmenuPT .has-sub a{display:block;position:relative}#cssmenuPT .has-sub > a:after{content:'';display:block;width:10px;height:9px;position:absolute;right:5px;top:50%;margin-top:-5px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjRCQjdBNUNENDkzMTExRTI4NENBRkFDOUM5MUY0QzI2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjRCQjdBNUNFNDkzMTExRTI4NENBRkFDOUM5MUY0QzI2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NEJCN0E1Q0I0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NEJCN0E1Q0M0OTMxMTFFMjg0Q0FGQUM5QzkxRjRDMjYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4qSqkdAAAAtUlEQVR42nyOPQ6DMAyF3bSIKXeplGP0IL1EpU5dkZiQeoDegBt0ZO4BOjORABL5oX4RZCniDZbl99nPh6ZpjkR0pn19TlxclmW7lHOOANZSykue55uQtZbatiXBfdV1Hc3zvAnCY12FUqrm02Xf93/QOI40TdOLmadYZoUxhkIICUKC1hpthRJB3viy8ViMKCR470v23glcdB+GIT7PACEBSauZQN70eBrP4zIn3JC0+j8BBgCxDV02ZQEC4wAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenuPT .has-sub ul{background:#f6f6f6;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;display:none;padding:10px 0;position:absolute;left:50%;top:34px;margin-left:-70px;width:140px;z-index:1}#cssmenuPT .has-sub ul li:hover > a{background:#ddd;color:#ae0001;border-color:#e5e5e5 transparent transparent transparent}#cssmenuPT .has-sub ul a{line-height:160%;padding:8px 0}#cssmenuPT .has-sub .has-sub a:after{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgwRkJGQzk4NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgwRkJGQzk5NDkzMTExRTI4M0U0QzE5NjJFN0U3RjNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODBGQkZDOTY0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODBGQkZDOTc0OTMxMTFFMjgzRTRDMTk2MkU3RTdGM0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6DuTwoAAAAtUlEQVR42nyOsQ3CMBBFj4CVyktkAvZgEJZAoqKNoMoEjMAGzEDnhtKyGztxYzvmznIsIUX5kq2T/rv7fyeE2APAEbb1OeAXGGObVAgBCHxxzk9t265C3ntQSkGD82CMgZTSKkge6pwB7HmXUibn3N/TWif0nsQ0ZbEfxxHmea6XyLTW0jjQl8Gu675o3IqRNU0TxBgf6L0rWHTFuFweAaAESlrMCuJmpNJUni5jwoWSFv8nwAA0tXChxwneNwAAAABJRU5ErkJggg==);-webkit-transform:rotate(360deg)}#cssmenuPT .has-sub .has-sub ul{background:#ddd;left:100%;top:0;margin-left:0}#cssmenuPT .has-sub .has-sub ul a{background:none;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0}#cssmenuPT .has-sub .has-sub ul a:after{background-image:none}#cssmenuPT .has-sub .has-sub ul a:hover{background:#bfbfbf}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuPT"> <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>

Blue Drop DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:500);/* 2f4b87 *//* 2f4b87 *//* #1f325d *//* Menu CSS */#cssmenuBD{width:auto}#cssmenuBD,#cssmenuBD ul,#cssmenuBD ul li,#cssmenuBD ul li a{padding:0;margin:0;line-height:1;font-family:'Source Sans Pro',sans-serif;font-weight:500;font-size:16px;color:#fff;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenuBD:before,#cssmenuBD:after,#cssmenuBD > ul:before,#cssmenuBD > ul:after{content:'';display:table}#cssmenuBD:after,#cssmenuBD > ul:after{clear:both}#cssmenuBD a{text-shadow:0 1px 1px rgba(0,0,0,0.2)}#cssmenuBD ul{background:#3b5998;border-radius:3px;border:1px solid #2b4479;border:1px solid #2d4373;-webkit-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-o-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-moz-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);-ms-box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15);box-shadow:0 1px 2px rgba(2,2,2,0.25),inset 0 1px 1px rgba(255,255,255,0.15)}#cssmenuBD ul > li{float:left;list-style:none}#cssmenuBD ul > li > a{display:block;text-decoration:none;padding:15px 44px;position:relative}#cssmenuBD ul > li > a:hover{background:#2d4373;-webkit-box-shadow:inset 0 0 1px #1e2e4f;-o-box-shadow:inset 0 0 1px #1e2e4f;-moz-box-shadow:inset 0 0 1px #1e2e4f;-ms-box-shadow:inset 0 0 1px #1e2e4f;box-shadow:inset 0 0 1px #1e2e4f;-webkit-transition:all ease .3s;-o-transition:all ease .3s;-moz-transition:all ease .3s;-ms-transition:all ease .3s;transition:all ease .3s}#cssmenuBD ul > li > a:hover:before{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-right:0;width:100%;height:100%;top:0;left:-1px;opacity:.2}#cssmenuBD ul > li > a:hover:after{content:'';z-index:2;position:absolute;border:1px solid white;border-top:0;border-bottom:0;border-left:0;width:100%;height:100%;top:0;right:-1px;opacity:.2}#cssmenuBD > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenuBD > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute;border-radius:0 0 3px 3px;-webkit-box-shadow:none;-o-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;box-shadow:none}#cssmenuBD > ul > li > ul{width:200px;position:absolute}#cssmenuBD > ul > li > ul > li{float:none;position:relative}#cssmenuBD > ul > li > ul > li > ul{opacity:0;visibility:hidden;position:absolute}#cssmenuBD > ul > li > ul > li:hover > ul{opacity:1;visibility:visible;position:absolute}#cssmenuBD > ul > li > ul > li > ul{left:200px;top:1px;width:200px}#cssmenuBD > ul > li > ul > li > ul > li{float:none}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuBD"> <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 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>

Rounded Slate 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';#cssmenuRS ul,#cssmenuRS li,#cssmenuRS span,#cssmenuRS a{border:0;margin:0;padding:0;position:relative}#cssmenuRS{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;box-shadow:0 0 2px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 0 2px 1px rgba(0,0,0,0.15);-webkit-box-shadow:0 0 2px 1px rgba(0,0,0,0.15);background:-moz-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f2edea),color-stop(100%,#c0bebf));background:-webkit-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-o-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-ms-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:linear-gradient(to bottom,#f2edea 0%,#c0bebf 100%);font-weight:600;height:52px;width:auto}#cssmenuRS:after,#cssmenuRS ul:after{content:'';display:block;clear:both}#cssmenuRS a{box-shadow:inset 0 1px 0 whitesmoke;-moz-box-shadow:inset 0 1px 0 whitesmoke;-webkit-box-shadow:inset 0 1px 0 whitesmoke;background:#f2edea url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAA3NCSVQICAjb4U/gAAAAMklEQVQImWP49PYV0////6GYAcFm+I9d/P9/JgZkcRR12NVDzMMihlMtRJyBkHpMNwIA6ZmLp7k56KwAAAAASUVORK5CYII=) 100% 100%;background:-moz-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f2edea),color-stop(100%,#c0bebf));background:-webkit-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-o-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:-ms-linear-gradient(top,#f2edea 0%,#c0bebf 100%);background:linear-gradient(to bottom,#f2edea 0%,#c0bebf 100%);color:#666;display:inline-block;font-family:Arial,Verdana,sans-serif;font-size:12px;line-height:52px;padding:0 28px;text-decoration:none}#cssmenuRS ul{list-style:none;box-shadow:inset 0 1px 0 whitesmoke;-moz-box-shadow:inset 0 1px 0 whitesmoke;-webkit-box-shadow:inset 0 1px 0 whitesmoke}#cssmenuRS > ul{float:left}#cssmenuRS > ul > li{float:left}#cssmenuRS > 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}#cssmenuRS > ul > li.active a,#cssmenuRS > ul > li:hover > a{box-shadow:inset 0 -2px 3px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 -2px 3px rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 -2px 3px rgba(0,0,0,0.15);color:white;background:#4a5662 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAIAAADEwMXAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkNDNkM2QzM1NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkNDNkM2QzM2NDk0QjExRTI5NjFDQzlFM0NGQzY5RDNBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0M2QzZDMzM0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M2QzZDMzQ0OTRCMTFFMjk2MUNDOUUzQ0ZDNjlEM0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6bEPV5AAAAUUlEQVR42mSO0RWAMAgDc4znAA7g/jvUFKj66gevCT0COs4rJLkIoSC1X+j+7GFfupj+a4bFu+isydcMr88dY/PkLL8bPnrLXTvHk2NdzC3AAIj5BKfn0x2aAAAAAElFTkSuQmCC);background:-moz-linear-gradient(top,#4a5662 0%,#606f7f 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#4a5662),color-stop(100%,#606f7f));background:-webkit-linear-gradient(top,#4a5662 0%,#606f7f 100%);background:-o-linear-gradient(top,#4a5662 0%,#606f7f 100%);background:-ms-linear-gradient(top,#4a5662 0%,#606f7f 100%);background:linear-gradient(to bottom,#4a5662 0%,#606f7f 100%)}#cssmenuRS .has-sub{z-index:1}#cssmenuRS .has-sub:hover > ul{display:block}#cssmenuRS .has-sub ul{box-shadow:0 1px 2px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15);display:none;position:absolute;width:200px;top:100%;left:0}#cssmenuRS .has-sub ul li a{background:#606f7f;border-bottom:1px solid #59636f;border-bottom:1px solid #556371;box-shadow:inset 0 1px 0 #606f7f;-moz-box-shadow:inset 0 1px 0 #606f7f;-webkit-box-shadow:inset 0 1px 0 #606f7f;color:white;display:block;line-height:160%;padding:15px 10px;font-size:12px}#cssmenuRS .has-sub ul li:hover a{background:#4a5662;box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15)}#cssmenuRS .has-sub .has-sub:hover > ul{display:block}#cssmenuRS .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenuRS .has-sub .has-sub ul li a{background:#606f7f;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none}#cssmenuRS .has-sub .has-sub ul li a:hover{background:#4a5662;box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15);-webkit-box-shadow:inset 0 0 3px 1px rgba(0,0,0,0.15)}</style><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenuRS"> <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>

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>

Blue & Yellow 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 */#cssmenuBYR,#cssmenuBYR > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm71rDg0GpQkQaXaEkQI_6kETOt7YBIewYqEzZhQveM8FGbONwckpJSU0U-OEwJbuShDCo8LpUvH0Mk5ja1QG8tulwNUoMDTZ2BeFnX6Lj6tvc_u8qB1g_k6b7WlUFhV5v5TahhTsK8wKa/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenuBYR:before,#cssmenuBYR:after,#cssmenuBYR > ul:before,#cssmenuBYR > ul:after{content:'';display:table}#cssmenuBYR:after,#cssmenuBYR > ul:after{clear:both}#cssmenuBYR{width:auto;zoom:1}#cssmenuBYR > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRXg1t7vS2rogL8DKdqHeYvhViHFLRCMTw4pEeo7_kWF5iXsJFG5QrNJMoY2FH67pESf17PqSxNAvOnFm8rS8U41KfAUlSUGrlUFsCDCqPU36HBkROW9a5JASKYxua8y2Aq2-RJJCewgU/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenuBYR > ul li{margin:0;padding:0;list-style:none}#cssmenuBYR > ul > li{float:left;position:relative}#cssmenuBYR > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #c28130;text-shadow:0 -1px 0 rgba(151,99,33,0.43);line-height:18px}#cssmenuBYR > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyGIXVCzs7qeml5UTXdMkSnvPqZfSRuMshLDwbp0a1BE49ycPQbyN30_-g0F8gUSh04gEkgn6Cyfh6hbFldTfkLnFDU3uACZbOCpV9yBGh9RdPoAO6gLRcUmlm6_EFVnZ7ChKAEz264Ek/s1600/hover.png) repeat}#cssmenuBYR > ul > li > a > span{line-height:18px}#cssmenuBYR > ul > li.active > a,#cssmenuBYR > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm71rDg0GpQkQaXaEkQI_6kETOt7YBIewYqEzZhQveM8FGbONwckpJSU0U-OEwJbuShDCo8LpUvH0Mk5ja1QG8tulwNUoMDTZ2BeFnX6Lj6tvc_u8qB1g_k6b7WlUFhV5v5TahhTsK8wKa/s1600/highlight-bg.png) repeat}/* Childs */#cssmenuBYR > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyGIXVCzs7qeml5UTXdMkSnvPqZfSRuMshLDwbp0a1BE49ycPQbyN30_-g0F8gUSh04gEkgn6Cyfh6hbFldTfkLnFDU3uACZbOCpV9yBGh9RdPoAO6gLRcUmlm6_EFVnZ7ChKAEz264Ek/s1600/hover.png) repeat;margin:0;padding:0;z-index:-1;-webkit-transition:all 0.35s 0.2s ease-in-out;-moz-transition:all 0.35s 0.2s ease-in-out;-ms-transition:all 0.35s 0.2s ease-in-out;transition:all 0.35s 0.2s ease-in-out}#cssmenuBYR > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenuBYR > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenuBYR > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenuBYR > ul ul li a{padding:18px 26px;display:block;color:white;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 #c28130;text-shadow:0 -1px 0 rgba(151,99,33,0.43)}#cssmenuBYR > ul ul li a:hover{border-left:4px solid #055988;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm71rDg0GpQkQaXaEkQI_6kETOt7YBIewYqEzZhQveM8FGbONwckpJSU0U-OEwJbuShDCo8LpUvH0Mk5ja1QG8tulwNUoMDTZ2BeFnX6Lj6tvc_u8qB1g_k6b7WlUFhV5v5TahhTsK8wKa/s1600/highlight-bg.png) repeat}#cssmenuBYR > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRXg1t7vS2rogL8DKdqHeYvhViHFLRCMTw4pEeo7_kWF5iXsJFG5QrNJMoY2FH67pESf17PqSxNAvOnFm8rS8U41KfAUlSUGrlUFsCDCqPU36HBkROW9a5JASKYxua8y2Aq2-RJJCewgU/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="cssmenuBYR"> <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>

Grey Red 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 */#cssmenuGRD,#cssmenuGRD > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjyx1oo3eSiNRTK-6H4vUAbU2qFgzJgqz1vdm4pGJ0tzHrX1-D50AggPbwjFA8SJIAziYgY9HYavCQQ0W4XQqJTDwfptOoNQa8QtuXkTm-8skVuFyAwE4akj8c7LbfvrVG41_yBXuEjhA/s1600/highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#cssmenuGRD:before,#cssmenuGRD:after,#cssmenuGRD > ul:before,#cssmenuGRD > ul:after{content:'';display:table}#cssmenuGRD:after,#cssmenuGRD > ul:after{clear:both}#cssmenuGRD{width:auto;zoom:1}#cssmenuGRD > ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLLmu1e23Ve4HsqTFJSwxnEUKc3OeJJ0CEyxc6DJwjeq4SG8U8qKXClZwYmDO-dDhiBB4JzFVsnBSdNLg5_weGPSVpEKVqE_TPX20f32howLmxiMxj36v7kw2TdJvC6SSqenDNMgr1Lge/s1600/menu-bg.png) repeat;margin:0;padding:0;position:relative}#cssmenuGRD > ul li{margin:0;padding:0;list-style:none}#cssmenuGRD > ul > li{float:left;position:relative}#cssmenuGRD > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #0d0d0d;text-shadow:0 -1px 0 rgba(0,0,0,0.7);line-height:18px}#cssmenuGRD > ul > li:hover > a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDjyx1oo3eSiNRTK-6H4vUAbU2qFgzJgqz1vdm4pGJ0tzHrX1-D50AggPbwjFA8SJIAziYgY9HYavCQQ0W4XQqJTDwfptOoNQa8QtuXkTm-8skVuFyAwE4akj8c7LbfvrVG41_yBXuEjhA/s1600/highlight-bg.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#cssmenuGRD > ul > li > a > span{line-height:18px}#cssmenuGRD > ul > li.active > a,#cssmenuGRD > ul > li > a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYxk4Zku3fXNJuQC5HN9u2E0OCrGt5vbArJfJmyRgKAGeJVJbIWoD1NQcrkOrqY_GeRHhgqBUsS80vSzVGakEgEQ6WaelCp_fwsJAY_rRIoAeaq1cMg2iwiC-Y4V-eLwbl0oICBQDAnfV/s1600/hover.png) repeat}/* Childs */#cssmenuGRD > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLLmu1e23Ve4HsqTFJSwxnEUKc3OeJJ0CEyxc6DJwjeq4SG8U8qKXClZwYmDO-dDhiBB4JzFVsnBSdNLg5_weGPSVpEKVqE_TPX20f32howLmxiMxj36v7kw2TdJvC6SSqenDNMgr1Lge/s1600/menu-bg.png) repeat;margin:0;padding:0;z-index:-1}#cssmenuGRD > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#cssmenuGRD > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#cssmenuGRD > ul ul li{list-style:none;padding:0;margin:0;width:100%}#cssmenuGRD > ul ul li a{padding:18px 26px;display:block;color:white;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}#cssmenuGRD > ul ul li a:hover{border-left:4px solid #d64e34;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfYxk4Zku3fXNJuQC5HN9u2E0OCrGt5vbArJfJmyRgKAGeJVJbIWoD1NQcrkOrqY_GeRHhgqBUsS80vSzVGakEgEQ6WaelCp_fwsJAY_rRIoAeaq1cMg2iwiC-Y4V-eLwbl0oICBQDAnfV/s1600/hover.png) repeat}#cssmenuGRD > ul ul li a:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBLLmu1e23Ve4HsqTFJSwxnEUKc3OeJJ0CEyxc6DJwjeq4SG8U8qKXClZwYmDO-dDhiBB4JzFVsnBSdNLg5_weGPSVpEKVqE_TPX20f32howLmxiMxj36v7kw2TdJvC6SSqenDNMgr1Lge/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="cssmenuGRD"> <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>

Flat Accented DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono); /* Starter CSS for Menu */ #cssmenuFA { padding: 0; margin: 0; border: 0; width: auto; } #cssmenuFA ul, #cssmenuFA li { list-style: none; margin: 0; padding: 0; } #cssmenuFA ul { position: relative; z-index: 597; } #cssmenuFA ul li { float: left; min-height: 1px; vertical-align: middle; } #cssmenuFA ul li.hover, #cssmenuFA ul li:hover { position: relative; z-index: 599; cursor: default; } #cssmenuFA ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #cssmenuFA ul ul li { float: none; } #cssmenuFA ul ul ul { top: 0; left: 190px; width: 190px; } #cssmenuFA ul li:hover > ul { visibility: visible; } #cssmenuFA ul ul { bottom: 0; left: 0; } #cssmenuFA ul ul { margin-top: 0; } #cssmenuFA ul ul li { font-weight: normal; } #cssmenuFA a { display: block; line-height: 1em; text-decoration: none; } /* Custom CSS Styles */ #cssmenuFA { background: #333333; border-bottom: 4px solid #1b9bff; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; } #cssmenuFA > ul { *display: inline-block; } #cssmenuFA:after, #cssmenuFA ul:after { content: ''; display: block; clear: both; } #cssmenuFA ul { text-transform: uppercase; } #cssmenuFA ul ul { border-top: 4px solid #1b9bff; text-transform: none; min-width: 190px; } #cssmenuFA ul ul a { background: #1b9bff; color: #ffffff; border: 1px solid #0082e7; border-top: 0 none; line-height: 150%; padding: 16px 20px; font-size: 12px; } #cssmenuFA ul ul ul { border-top: 0 none; } #cssmenuFA ul ul li { position: relative; } #cssmenuFA ul ul li:first-child > a { border-top: 1px solid #0082e7; } #cssmenuFA ul ul li:hover > a { background: #4eb1ff; color: #ffffff; } #cssmenuFA ul ul li:last-child > a { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-box-shadow: 0 1px 0 #1b9bff; -webkit-box-shadow: 0 1px 0 #1b9bff; box-shadow: 0 1px 0 #1b9bff; } #cssmenuFA ul ul li:last-child:hover > a { -moz-border-radius: 0 0 0 3px; -webkit-border-radius: 0 0 0 3px; border-radius: 0 0 0 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } #cssmenuFA ul ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; right: 15px; margin-top: -8px; } #cssmenuFA ul li:hover > a, #cssmenuFA ul li.active > a { background: #1b9bff; color: #ffffff; } #cssmenuFA ul li.has-sub > a:after { content: '+'; margin-left: 5px; } #cssmenuFA ul li.last ul { left: auto; right: 0; } #cssmenuFA ul li.last ul ul { left: auto; right: 99.5%; } #cssmenuFA a { background: #333333; color: #CBCBCB; padding: 0 20px; } #cssmenuFA > ul > li > a { line-height: 48px; font-size: 12px; } </style> <!-- edit menu --> <div id='cssmenuFA'> <ul> <li><a href='#'><span>Home</span></a></li> <li class='active 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>

Canopy DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@charset "UTF-8";/* Base Styles */#cssmenu > ul,#cssmenu > ul li,#cssmenu > ul ul {list-style: none;margin: 0;padding: 0;}#cssmenu > ul {position: relative;z-index: 597;}#cssmenu > ul li {float: left;min-height: 1px;line-height: 1.3em;vertical-align: middle;}#cssmenu > ul li.hover,#cssmenu > ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenu > ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenu > ul ul li {float: none;}#cssmenu > ul ul ul {top: 1px;left: 99%;}#cssmenu > ul li:hover > ul {visibility: visible;}/* Align last drop down RTL */#cssmenu > ul > li.last ul ul {left: auto !important;right: 99%;}#cssmenu > ul > li.last ul {left: auto;right: 0;}#cssmenu > ul > li.last {text-align: right;}/* Theme Styles */#cssmenu > ul {border-top: 4px solid #3fa338;font-family: Calibri, Tahoma, Arial, sans-serif;font-size: 14px;background: #1e1e1e;background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);background: linear-gradient(top, #1e1e1e 0%, #040404 100%);width: auto;zoom: 1;}#cssmenu > ul:before {content: '';display: block;}#cssmenu > ul:after {content: '';display: table;clear: both;}#cssmenu > ul li a {display: inline-block;padding: 10px 22px;}#cssmenu > ul > li.active,#cssmenu > ul > li.active:hover {background-color: #3fa338;}#cssmenu > ul > li > a:link,#cssmenu > ul > li > a:active,#cssmenu > ul > li > a:visited {color: #ffffff;}#cssmenu > ul > li > a:hover {color: #ffffff;}#cssmenu > ul ul ul {top: 0;}#cssmenu > ul li li {background-color: #ffffff;border-bottom: 1px solid #ebebeb;font-size: 12px;}#cssmenu > ul li.hover,#cssmenu > ul li:hover {background-color: #F5F5F5;}#cssmenu > ul > li.hover,#cssmenu > ul > li:hover {background-color: #3fa338;-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);}#cssmenu > ul a:link,#cssmenu > ul a:visited {color: #9a9a9a;text-decoration: none;}#cssmenu > ul a:hover {color: #9a9a9a;}#cssmenu > ul a:active {color: #9a9a9a;}#cssmenu > ul ul {border: 1px solid #CCC \9;-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);width: 150px;}</style> <!--Edit menu --> <style>@charset "UTF-8";/* Base Styles */#cssmenuCan > ul,#cssmenuCan > ul li,#cssmenuCan > ul ul {list-style: none;margin: 0;padding: 0;}#cssmenuCan > ul {position: relative;z-index: 597;}#cssmenuCan > ul li {float: left;min-height: 1px;line-height: 1.3em;vertical-align: middle;}#cssmenuCan > ul li.hover,#cssmenuCan > ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuCan > ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenuCan > ul ul li {float: none;}#cssmenuCan > ul ul ul {top: 1px;left: 99%;}#cssmenuCan > ul li:hover > ul {visibility: visible;}/* Align last drop down RTL */#cssmenuCan > ul > li.last ul ul {left: auto !important;right: 99%;}#cssmenuCan > ul > li.last ul {left: auto;right: 0;}#cssmenuCan > ul > li.last {text-align: right;}/* Theme Styles */#cssmenuCan > ul {border-top: 4px solid #3fa338;font-family: Calibri, Tahoma, Arial, sans-serif;font-size: 14px;background: #1e1e1e;background: -moz-linear-gradient(top, #1e1e1e 0%, #040404 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e1e1e), color-stop(100%, #040404));background: -webkit-linear-gradient(top, #1e1e1e 0%, #040404 100%);background: linear-gradient(top, #1e1e1e 0%, #040404 100%);width: auto;zoom: 1;}#cssmenuCan > ul:before {content: '';display: block;}#cssmenuCan > ul:after {content: '';display: table;clear: both;}#cssmenuCan > ul li a {display: inline-block;padding: 10px 22px;}#cssmenuCan > ul > li.active,#cssmenuCan > ul > li.active:hover {background-color: #3fa338;}#cssmenuCan > ul > li > a:link,#cssmenuCan > ul > li > a:active,#cssmenuCan > ul > li > a:visited {color: #ffffff;}#cssmenuCan > ul > li > a:hover {color: #ffffff;}#cssmenuCan > ul ul ul {top: 0;}#cssmenuCan > ul li li {background-color: #ffffff;border-bottom: 1px solid #ebebeb;font-size: 12px;}#cssmenuCan > ul li.hover,#cssmenuCan > ul li:hover {background-color: #F5F5F5;}#cssmenuCan > ul > li.hover,#cssmenuCan > ul > li:hover {background-color: #3fa338;-webkit-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);-moz-box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);}#cssmenuCan > ul a:link,#cssmenuCan > ul a:visited {color: #9a9a9a;text-decoration: none;}#cssmenuCan > ul a:hover {color: #9a9a9a;}#cssmenuCan > ul a:active {color: #9a9a9a;}#cssmenuCan > ul ul {border: 1px solid #CCC \9;-webkit-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);box-shadow: 0 0px 2px 1px rgba(0, 0, 0, 0.15);width: 150px;}</style> <div id='cssmenuCan'> <ul> <li><a href='#'><span>Home</span></a></li> <li class='active 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>

Opera DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>#cssmenuOp ul,#cssmenuOp li,#cssmenuOp span,#cssmenuOp a {margin: 0;padding: 0;position: relative;}#cssmenuOp {line-height: 1;border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;background: #141414;background: -moz-linear-gradient(top, #333333 0%, #141414 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);background: -o-linear-gradient(top, #333333 0%, #141414 100%);background: -ms-linear-gradient(top, #333333 0%, #141414 100%);background: linear-gradient(to bottom, #333333 0%, #141414 100%);border-bottom: 2px solid #0fa1e0;width: auto;}#cssmenuOp:after,#cssmenuOp ul:after {content: '';display: block;clear: both;}#cssmenuOp a {background: #141414;background: -moz-linear-gradient(top, #333333 0%, #141414 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);background: -o-linear-gradient(top, #333333 0%, #141414 100%);background: -ms-linear-gradient(top, #333333 0%, #141414 100%);background: linear-gradient(to bottom, #333333 0%, #141414 100%);color: #ffffff;display: block;font-family: Helvetica, Arial, Verdana, sans-serif;padding: 19px 20px;text-decoration: none;}#cssmenuOp ul {list-style: none;}#cssmenuOp > ul > li {display: inline-block;float: left;margin: 0;}#cssmenuOp.align-center {text-align: center;}#cssmenuOp.align-center > ul > li {float: none;}#cssmenuOp.align-center ul ul {text-align: left;}#cssmenuOp.align-right > ul {float: right;}#cssmenuOp.align-right ul ul {text-align: right;}#cssmenuOp > ul > li > a {color: #ffffff;font-size: 12px;}#cssmenuOp > 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 #0fa1e0;margin-left: -10px;}#cssmenuOp > 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;}#cssmenuOp.align-right > ul > li:first-child > a,#cssmenuOp.align-center > ul > li:first-child > a {border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}#cssmenuOp.align-right > ul > li:last-child > a {border-radius: 0 5px 0 0;-moz-border-radius: 0 5px 0 0;-webkit-border-radius: 0 5px 0 0;}#cssmenuOp > ul > li.active > a,#cssmenuOp > ul > li:hover > a {color: #ffffff;box-shadow: inset 0 0 3px #000000;-moz-box-shadow: inset 0 0 3px #000000;-webkit-box-shadow: inset 0 0 3px #000000;background: #070707;background: -moz-linear-gradient(top, #262626 0%, #070707 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);background: -o-linear-gradient(top, #262626 0%, #070707 100%);background: -ms-linear-gradient(top, #262626 0%, #070707 100%);background: linear-gradient(to bottom, #262626 0%, #070707 100%);}#cssmenuOp .has-sub {z-index: 1;}#cssmenuOp .has-sub:hover > ul {display: block;}#cssmenuOp .has-sub ul {display: none;position: absolute;width: 200px;top: 100%;left: 0;}#cssmenuOp.align-right .has-sub ul {left: auto;right: 0;}#cssmenuOp .has-sub ul li {*margin-bottom: -1px;}#cssmenuOp .has-sub ul li a {background: #0fa1e0;border-bottom: 1px dotted #31b7f1;font-size: 11px;filter: none;display: block;line-height: 120%;padding: 10px;color: #ffffff;}#cssmenuOp .has-sub ul li:hover a {background: #0c7fb0;}#cssmenuOp ul ul li:hover > a {color: #ffffff;}#cssmenuOp .has-sub .has-sub:hover > ul {display: block;}#cssmenuOp .has-sub .has-sub ul {display: none;position: absolute;left: 100%;top: 0;}#cssmenuOp.align-right .has-sub .has-sub ul,#cssmenuOp.align-right ul ul ul {left: auto;right: 100%;}#cssmenuOp .has-sub .has-sub ul li a {background: #0c7fb0;border-bottom: 1px dotted #31b7f1;}#cssmenuOp .has-sub .has-sub ul li a:hover {background: #0a6d98;}#cssmenuOp ul ul li.last > a,#cssmenuOp ul ul li:last-child > a,#cssmenuOp ul ul ul li.last > a,#cssmenuOp ul ul ul li:last-child > a,#cssmenuOp .has-sub ul li:last-child > a,#cssmenuOp .has-sub ul li.last > a {border-bottom: 0;}</style> <!-- Edit menu --> <div id='cssmenuOp'> <ul> <li><a href='#'><span>Home</span></a></li> <li class='active 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>

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/