Kemal Fajar Tholomew: Gadget | Your Blog Description

Free Vertical Drop Down Menu for Blogger Page 2

Posted by Unknown Posted on 19.54 with No comments

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.

Elegant Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);@charset "UTF-8";/* Base Styles */#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;font-family: 'Open Sans', sans-serif;font-size: 14px;position: relative;}#cssmenu a {line-height: 1.3;}#cssmenu {width: 250px;background: #fff;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;padding: 3px;-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);}#cssmenu > ul > li {margin: 0 0 2px 0;}#cssmenu > ul > li:last-child {margin: 0;}#cssmenu > ul > li > a {font-size: 15px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #565656;background: -moz-linear-gradient(#565656 0%, #323232 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));background: -webkit-linear-gradient(#565656 0%, #323232 100%);background: linear-gradient(#565656 0%, #323232 100%);border: 1px solid #000;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}#cssmenu > ul > li > a > span {display: block;border: 1px solid #666666;padding: 6px 10px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;font-weight: bold;}#cssmenu > ul > li > a:hover {text-decoration: none;}#cssmenu > ul > li.active {border-bottom: none;}#cssmenu > ul > li.active > a {background: #97be10;background: -moz-linear-gradient(#97be10 0%, #79980d 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);background: linear-gradient(#97be10 0%, #79980d 100%);color: #fff;text-shadow: 0 1px 1px #000;border: 1px solid #79980d;}#cssmenu > ul > li.active > a span {border: 1px solid #97be10;}#cssmenu > ul > li.has-sub > a span {background: url(images/icon_plus.png) 98% center no-repeat;}#cssmenu > ul > li.has-sub.active > a span {background: url(images/icon_minus.png) 98% center no-repeat;}/* Sub menu */#cssmenu ul ul {padding: 5px 12px;display: none;}#cssmenu ul ul li {padding: 3px 0;}#cssmenu ul ul a {display: block;color: #595959;font-size: 13px;font-weight: bold;}#cssmenu ul ul a:hover {color: #79980d;}</style> <script type="text/javascript">(function($){$(document).ready(function(){$('#cssmenu li.active').addClass('open').children('ul').show();$('#cssmenu li.has-sub>a').on('click', function(){$(this).removeAttr('href');var element = $(this).parent('li');if (element.hasClass('open')) {element.removeClass('open');element.find('li').removeClass('open');element.find('ul').slideUp(200);}else {element.addClass('open');element.children('ul').slideDown(200);element.siblings('li').children('ul').slideUp(200);element.siblings('li').removeClass('open');element.siblings('li').find('li').removeClass('open');element.siblings('li').find('ul').slideUp(200);}});});})(jQuery);</script>  <div id='cssmenu'><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 Galih1</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>

Slabbed Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>#cssmenuSlA,#cssmenuSlA ul,#cssmenuSlA ul li,#cssmenuSlA ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuSlA {width: 200px;font-family: Helvetica, Arial, sans-serif;color: #ffffff;}#cssmenuSlA ul ul {display: none;}.align-right {float: right;}#cssmenuSlA > ul > li > a {padding: 15px 20px;border-left: 1px solid #1682ba;border-right: 1px solid #1682ba;border-top: 1px solid #1682ba;cursor: pointer;z-index: 2;font-size: 14px;font-weight: bold;text-decoration: none;color: #ffffff;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);background: #36aae7;background: -webkit-linear-gradient(#36aae7, #1fa0e4);background: -moz-linear-gradient(#36aae7, #1fa0e4);background: -o-linear-gradient(#36aae7, #1fa0e4);background: -ms-linear-gradient(#36aae7, #1fa0e4);background: linear-gradient(#36aae7, #1fa0e4);box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);}#cssmenuSlA > ul > li > a:hover,#cssmenuSlA > ul > li.active > a,#cssmenuSlA > ul > li.open > a {color: #eeeeee;background: #1fa0e4;background: -webkit-linear-gradient(#1fa0e4, #1992d1);background: -moz-linear-gradient(#1fa0e4, #1992d1);background: -o-linear-gradient(#1fa0e4, #1992d1);background: -ms-linear-gradient(#1fa0e4, #1992d1);background: linear-gradient(#1fa0e4, #1992d1);}#cssmenuSlA > ul > li.open > a {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);border-bottom: 1px solid #1682ba;}#cssmenuSlA > ul > li:last-child > a,#cssmenuSlA > ul > li.last > a {border-bottom: 1px solid #1682ba;}.holder {width: 0;height: 0;position: absolute;top: 0;right: 0;}.holder::after,.holder::before {display: block;position: absolute;content: "";width: 6px;height: 6px;right: 20px;z-index: 10;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}.holder::after {top: 17px;border-top: 2px solid #ffffff;border-left: 2px solid #ffffff;}#cssmenuSlA > ul > li > a:hover > span::after,#cssmenuSlA > ul > li.active > a > span::after,#cssmenuSlA > ul > li.open > a > span::after {border-color: #eeeeee;}.holder::before {top: 18px;border-top: 2px solid;border-left: 2px solid;border-top-color: inherit;border-left-color: inherit;}#cssmenuSlA ul ul li a {cursor: pointer;border-bottom: 1px solid #32373e;border-left: 1px solid #32373e;border-right: 1px solid #32373e;padding: 10px 20px;z-index: 1;text-decoration: none;font-size: 13px;color: #eeeeee;background: #49505a;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}#cssmenuSlA ul ul li:hover > a,#cssmenuSlA ul ul li.open > a,#cssmenuSlA ul ul li.active > a {background: #424852;color: #ffffff;}#cssmenuSlA ul ul li:first-child > a {box-shadow: none;}#cssmenuSlA ul ul ul li:first-child > a {box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);}#cssmenuSlA ul ul ul li a {padding-left: 30px;}#cssmenuSlA > ul > li > ul > li:last-child > a,#cssmenuSlA > ul > li > ul > li.last > a {border-bottom: 0;}#cssmenuSlA > ul > li > ul > li.open:last-child > a,#cssmenuSlA > ul > li > ul > li.last.open > a {border-bottom: 1px solid #32373e;}#cssmenuSlA > ul > li > ul > li.open:last-child > ul > li:last-child > a {border-bottom: 0;}#cssmenuSlA ul ul li.has-sub > a::after {display: block;position: absolute;content: "";width: 5px;height: 5px;right: 20px;z-index: 10;top: 11.5px;border-top: 2px solid #eeeeee;border-left: 2px solid #eeeeee;-webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-ms-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);}#cssmenuSlA ul ul li.active > a::after,#cssmenuSlA ul ul li.open > a::after,#cssmenuSlA ul ul li > a:hover::after {border-color: #ffffff;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuSlA li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');     element.find('li').removeClass('open');    element.find('ul').slideUp();   }   else {    element.addClass('open');    element.children('ul').slideDown();    element.siblings('li').children('ul').slideUp();    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp();   }  });   $('#cssmenuSlA>ul>li.has-sub>a').append('<span class="holder"></span>');   (function getColor() {   var r, g, b;   var textColor = $('#cssmenuSlA').css('color');   textColor = textColor.slice(4);   r = textColor.slice(0, textColor.indexOf(','));   textColor = textColor.slice(textColor.indexOf(' ') + 1);   g = textColor.slice(0, textColor.indexOf(','));   textColor = textColor.slice(textColor.indexOf(' ') + 1);   b = textColor.slice(0, textColor.indexOf(')'));   var l = rgbToHsl(r, g, b);   if (l > 0.7) {    $('#cssmenuSlA>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');    $('#cssmenuSlA>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');   }   else   {    $('#cssmenuSlA>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');    $('#cssmenuSlA>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');   }  })();   function rgbToHsl(r, g, b) {      r /= 255, g /= 255, b /= 255;      var max = Math.max(r, g, b), min = Math.min(r, g, b);      var h, s, l = (max + min) / 2;       if(max == min){          h = s = 0;      }      else {          var d = max - min;          s = l > 0.5 ? d / (2 - max - min) : d / (max + min);          switch(max){              case r: h = (g - b) / d + (g < b ? 6 : 0); break;              case g: h = (b - r) / d + 2; break;              case b: h = (r - g) / d + 4; break;          }          h /= 6;      }      return l;  } }); } )( jQuery );</script>    <div id='cssmenuSlA'><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 Galih1</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>

Modern Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);#cssmenuMA {position: relative;margin: 0;font-family: 'Roboto Condensed';line-height: 1;width: 250px;}.align-right {float: right;}#cssmenuMA ul {margin: 0;padding: 0;list-style: none;display: block;}#cssmenuMA ul li {position: relative;margin: 0;padding: 0;}#cssmenuMA ul li a {text-decoration: none;cursor: pointer;}#cssmenuMA > ul > li > a {color: #dddddd;text-transform: uppercase;display: block;padding: 20px;border-top: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;background: #222222;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);letter-spacing: 1px;font-size: 16px;font-weight: 300;-webkit-transition: all 0.25s ease-in;-moz-transition: all 0.25s ease-in;-ms-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;transition: all 0.25s ease-in;position: relative;}#cssmenuMA > ul > li:first-child > a {border-top-left-radius: 3px;border-top-right-radius: 3px;}#cssmenuMA > ul > li:last-child > a {border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;border-bottom: 1px solid #000000;}#cssmenuMA > ul > li:hover > a,#cssmenuMA > ul > li.open > a,#cssmenuMA > ul > li.active > a {background: #151515;color: #ffffff;}#cssmenuMA ul > li.has-sub > a::after {content: "";position: absolute;display: block;width: 0;height: 0;border-top: 13px solid #000000;border-botom: 13px solid transparent;border-left: 125px solid transparent;border-right: 125px solid transparent;left: 0;bottom: -13px;bottom: 0px;z-index: 1;opacity: 0;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}#cssmenuMA ul > li.has-sub > a::before {content: "";position: absolute;display: block;width: 0;height: 0;border-top: 13px solid #151515;border-botom: 13px solid transparent;border-left: 125px solid transparent;border-right: 125px solid transparent;left: 0;bottom: -12px;bottom: -1px;z-index: 3;opacity: 0;-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;}#cssmenuMA ul > li.has-sub::after {content: "";display: block;position: absolute;width: 0;height: 0;border: 7px solid transparent;border-top-color: #dddddd;z-index: 2;right: 20px;top: 24.5px;pointer-events: none;}#cssmenuMA ul > li:hover::after,#cssmenuMA ul > li.active::after,#cssmenuMA ul > li.open::after {border-top-color: #ffffff;}#cssmenuMA ul > li.has-sub.open > a::after {opacity: 1;bottom: -13px;}#cssmenuMA ul > li.has-sub.open > a::before {opacity: 1;bottom: -12px;}#cssmenuMA ul ul {display: none;}#cssmenuMA ul ul li {border-left: 1px solid #ccc;border-right: 1px solid #ccc;}#cssmenuMA ul ul li a {background: #f1f1f1;display: block;position: relative;font-size: 15px;padding: 14px 20px;border-bottom: 1px solid #dddddd;color: #777777;font-weight: 300;-webkit-transition: all 0.25s ease-in;-moz-transition: all 0.25s ease-in;-ms-transition: all 0.25s ease-in;-o-transition: all 0.25s ease-in;transition: all 0.25s ease-in;}#cssmenuMA ul ul li:first-child > a {padding-top: 18px;}#cssmenuMA ul ul ul li {border: 0;}#cssmenuMA ul ul li:hover > a,#cssmenuMA ul ul li.open > a,#cssmenuMA ul ul li.active > a {background: #e4e4e4;color: #666666;}#cssmenuMA ul ul > li.has-sub > a::after {border-top: 13px solid #dddddd;}#cssmenuMA ul ul > li.has-sub > a::before {border-top: 13px solid #e4e4e4;}#cssmenuMA ul ul ul li a {padding-left: 30px;}#cssmenuMA ul ul > li.has-sub::after {top: 18.5px;border-width: 6px;border-top-color: #777777;}#cssmenuMA ul ul > li:hover::after,#cssmenuMA ul ul > li.active::after,#cssmenuMA ul ul > li.open::after {border-top-color: #666666;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuMA li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');    element.find('li').removeClass('open');    element.find('ul').slideUp();   }   else {    element.addClass('open');    element.children('ul').slideDown();    element.siblings('li').children('ul').slideUp();    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp();   }  }); }); } )( jQuery );</script>   <div id='cssmenuMA'><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 Galih1</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>

jQuery Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Lato);@charset "UTF-8";/* Base Styles */#cssmenuVJ,#cssmenuVJ ul,#cssmenuVJ li,#cssmenuVJ a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;font-family: 'Lato', sans-serif;font-size: 14px;position: relative;}#cssmenuVJ a {line-height: 1.3;padding: 6px 15px;}#cssmenuVJ {width: 200px;}#cssmenuVJ > ul > li {cursor: pointer;background: #000;border-bottom: 1px solid #4c4e53;}#cssmenuVJ > ul > li:last-child {border-bottom: 1px solid #3e3d3c;}#cssmenuVJ > ul > li > a {font-size: 13px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #64676e;background: -moz-linear-gradient(#64676e 0%, #4c4e53 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #64676e), color-stop(100%, #4c4e53));background: -webkit-linear-gradient(#64676e 0%, #4c4e53 100%);background: linear-gradient(#64676e 0%, #4c4e53 100%);}#cssmenuVJ > ul > li > a:hover {text-decoration: none;}#cssmenuVJ > ul > li.active {border-bottom: none;}#cssmenuVJ > ul > li.active > a {background: #97c700;background: -moz-linear-gradient(#97c700 0%, #709400 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97c700), color-stop(100%, #709400));background: -webkit-linear-gradient(#97c700 0%, #709400 100%);background: linear-gradient(#97c700 0%, #709400 100%);color: #4e5800;text-shadow: 0 1px 1px #709400;}#cssmenuVJ > ul > li.has-sub > a:after {content: "";position: absolute;top: 10px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}#cssmenuVJ > ul > li.has-sub.active > a:after {right: 14px;top: 12px;border: 5px solid transparent;border-top: 5px solid #4e5800;}/* Sub menu */#cssmenuVJ ul ul {padding: 0;display: none;}#cssmenuVJ ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}#cssmenuVJ ul ul li {border-bottom: 1px solid #c9c9c9;}#cssmenuVJ ul ul li.odd a {background: #e5e5e5;}#cssmenuVJ ul ul li:last-child {border: none;}</style>  <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuVJ ul ul li:odd').addClass('odd'); $('#cssmenuVJ ul ul li:even').addClass('even'); $('#cssmenuVJ > ul > li > a').click(function() {   $('#cssmenuVJ li').removeClass('active');   $(this).closest('li').addClass('active');    var checkElement = $(this).next();   if((checkElement.is('ul')) && (checkElement.is(':visible'))) {     $(this).closest('li').removeClass('active');     checkElement.slideUp('normal');   }   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {     $('#cssmenuVJ ul ul:visible').slideUp('normal');     checkElement.slideDown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;    }   }); }); } )( jQuery ); </script>   <div id='cssmenuVJ'><ul><li class='active'><a href='#'><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>

Flat Numbered jQuery Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);@charset "UTF-8";/* Base Styles */#cssmenuFNjA,#cssmenuFNjA ul,#cssmenuFNjA li,#cssmenuFNjA a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;font-family: 'Open Sans', sans-serif;font-size: 14px;position: relative;}#cssmenuFNjA a {line-height: 1.3;}#cssmenuFNjA {width: 250px;}#cssmenuFNjA > ul > li > a {padding-right: 40px;font-size: 25px;font-weight: bold;display: block;background: #bd0e36;color: #ffffff;border-bottom: 1px solid #5e071b;text-transform: uppercase;}#cssmenuFNjA > ul > li > a > span {background: #ed1144;padding: 10px;display: block;font-size: 13px;font-weight: 300;}#cssmenuFNjA > ul > li > a:hover {text-decoration: none;}#cssmenuFNjA > ul > li.active {border-bottom: none;}#cssmenuFNjA > ul > li.active > a {color: #fff;}#cssmenuFNjA > ul > li.active > a span {background: #bd0e36;}#cssmenuFNjA span.cnt {position: absolute;top: 8px;right: 15px;padding: 0;margin: 0;background: none;}/* Sub menu */#cssmenuFNjA ul ul {display: none;}#cssmenuFNjA ul ul li {border: 1px solid #e0e0e0;border-top: 0;}#cssmenuFNjA ul ul a {padding: 10px;display: block;color: #ed1144;font-size: 13px;}#cssmenuFNjA ul ul a:hover {color: #bd0e36;}#cssmenuFNjA ul ul li.odd {background: #f4f4f4;}#cssmenuFNjA ul ul li.even {background: #fff;}</style> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $(document).ready(function(){  $('#cssmenuFNjA > ul > li ul').each(function(index, e){   var count = $(e).find('li').length;   var content = '<span class=\"cnt\">' + count + '</span>';   $(e).closest('li').children('a').append(content); }); $('#cssmenuFNjA ul ul li:odd').addClass('odd'); $('#cssmenuFNjA ul ul li:even').addClass('even'); $('#cssmenuFNjA > ul > li > a').click(function() {   $('#cssmenuFNjA li').removeClass('active');   $(this).closest('li').addClass('active');    var checkElement = $(this).next();   if((checkElement.is('ul')) && (checkElement.is(':visible'))) {     $(this).closest('li').removeClass('active');     checkElement.slideUp('normal');   }   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {     $('#cssmenuFNjA ul ul:visible').slideUp('normal');     checkElement.slideDown('normal');   }   if($(this).closest('li').find('ul').children().length == 0) {     return true;   } else {     return false;    }   });  });  }); } )( jQuery );  </script>   <div id='cssmenuFNjA'><ul><li class='active'><a href='#'><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 Accordion DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);#cssmenuFAM,#cssmenuFAM ul,#cssmenuFAM ul li,#cssmenuFAM ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuFAM {width: 220px;font-family: Raleway, sans-serif;color: #ffffff;}#cssmenuFAM ul ul {display: none;}#cssmenuFAM > ul > li.active > ul {display: block;}.align-right {float: right;}#cssmenuFAM > ul > li > a {padding: 16px 22px;cursor: pointer;z-index: 2;font-size: 16px;text-decoration: none;color: #ffffff;background: #3ab4a6;-webkit-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFAM > ul > li > a:hover {color: #d8f3f0;}#cssmenuFAM ul > li.has-sub > a:after {position: absolute;right: 26px;top: 19px;z-index: 5;display: block;height: 10px;width: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}#cssmenuFAM ul > li.has-sub > a:before {position: absolute;right: 22px;top: 23px;display: block;width: 10px;height: 2px;background: #ffffff;content: "";-webkit-transition: all 0.1s ease-out;-moz-transition: all 0.1s ease-out;-ms-transition: all 0.1s ease-out;-o-transition: all 0.1s ease-out;transition: all 0.1s ease-out;}#cssmenuFAM ul > li.has-sub.open > a:after,#cssmenuFAM ul > li.has-sub.open > a:before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#cssmenuFAM ul ul li a {padding: 14px 22px;cursor: pointer;z-index: 2;font-size: 14px;text-decoration: none;color: #dddddd;background: #49505a;-webkit-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFAM ul ul ul li a {padding-left: 32px;}#cssmenuFAM ul ul li a:hover {color: #ffffff;}#cssmenuFAM ul ul > li.has-sub > a:after {top: 16px;right: 26px;background: #dddddd;}#cssmenuFAM ul ul > li.has-sub > a:before {top: 20px;background: #dddddd;}</style> <script type="text/javascript">(function($){ $(document).ready(function(){  $('#cssmenuFAM li.active').addClass('open').children('ul').show();  $('#cssmenuFAM li.has-sub>a').on('click', function(){   $(this).removeAttr('href');   var element = $(this).parent('li');   if (element.hasClass('open')) {    element.removeClass('open');    element.find('li').removeClass('open');    element.find('ul').slideUp(200);   }   else {    element.addClass('open');    element.children('ul').slideDown(200);    element.siblings('li').children('ul').slideUp(200);    element.siblings('li').removeClass('open');    element.siblings('li').find('li').removeClass('open');    element.siblings('li').find('ul').slideUp(200);   }  });  }); })(jQuery); </script>  <div id='cssmenuFAM'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Tutorial How to Add Drop Down Menu

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

Free Vertical Drop Down Menu for Blogger Page 1

Posted by Unknown Posted on 19.53 with No comments

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.

Simple Black Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>@charset "UTF-8";/* Some stylesheet reset */#cssmenuSBF > ul {list-style: none;margin: 0;padding: 0;vertical-align: baseline;line-height: 1;}/* The container */#cssmenuSBF > ul {display: block;position: relative;width: 150px;/* The list elements which contain the links */}#cssmenuSBF > ul li {display: block;position: relative;margin: 0;padding: 0;width: 100%;}/* General link styling */#cssmenuSBF > ul li a {/* Layout */display: block;position: relative;margin: 0;border-top: 1px dotted #3a3a3a;border-bottom: 1px dotted #1b1b1b;padding: 11px 20px;/* Typography */font-family: Helvetica, Arial, sans-serif;color: #d8d8d8;text-decoration: none;text-transform: uppercase;text-shadow: 0 1px 1px #000;font-size: 13px;font-weight: 300;/* Background & effects */background: #282828;}/* Rounded corners for the first link of the menu/submenus */#cssmenuSBF > ul li:first-child > a {border-top-left-radius: 4px;border-top-right-radius: 4px;border-top: 0;}/* Rounded corners for the last link of the menu/submenus */#cssmenuSBF > ul li:last-child > a {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-bottom: 0;}/* The hover state of the menu/submenu links */#cssmenuSBF > ul li > a:hover,#cssmenuSBF > ul li:hover > a {color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);background: #54cdf1;background: -webkit-linear-gradient(#72d4f2, #54cdf1);background: -moz-linear-gradient(#72d4f2, #54cdf1);background: linear-gradient(#72d4f2, #54cdf1);border-color: transparent;}/* The arrow indicating a submenu */#cssmenuSBF > ul .has-sub > a::after {content: "";position: absolute;top: 16px;right: 10px;width: 0px;height: 0px;/* Creating the arrow using borders */border: 4px solid transparent;border-left: 4px solid #d8d8d8;}/* The same arrow, but with a darker color, to create the shadow effect */#cssmenuSBF > ul .has-sub > a::before {content: "";position: absolute;top: 17px;right: 10px;width: 0px;height: 0px;/* Creating the arrow using borders */border: 4px solid transparent;border-left: 4px solid #000;}/* Changing the color of the arrow on hover */#cssmenuSBF > ul li > a:hover::after,#cssmenuSBF > ul li:hover > a::after {border-left: 4px solid #ffffff;}#cssmenuSBF > ul li > a:hover::before,#cssmenuSBF > ul li:hover > a::before {border-left: 4px solid rgba(0, 0, 0, 0.3);}/* THE SUBMENUS */#cssmenuSBF > ul ul {position: absolute;left: 100%;top: -9999px;padding-left: 5px;opacity: 0;width: 140px;/* The fade effect, created using an opacity transition */-webkit-transition: opacity 0.3s ease-in;-moz-transition: opacity 0.3s ease-in;transition: opacity 0.3s ease-in;}/* Showing the submenu when the user is hovering the parent link */#cssmenuSBF > ul li:hover > ul {top: 0px;opacity: 1;}</style>  <div id='cssmenuSBF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Platinum Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>/* Starter CSS for Flyout Menu */#cssmenuPFM {padding: 0;margin: 0;border: 0;}#cssmenuPFM ul,li {list-style: none;margin: 0;padding: 0;}#cssmenuPFM ul {position: relative;z-index: 597;float: left;}#cssmenuPFM ul li {float: left;min-height: 1px;line-height: 1em;vertical-align: middle;}#cssmenuPFM ul li.hover,#cssmenuPFM ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuPFM ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenuPFM ul ul li {float: none;}#cssmenuPFM ul li:hover > ul {visibility: visible;}#cssmenuPFM ul ul {top: 0;left: 100%;}#cssmenuPFM ul li {float: none;}/* Custom Stuff */#cssmenuPFM {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;-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);box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);width: 200px;}#cssmenuPFM span,#cssmenuPFM a {display: inline-block;font-family: Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;}#cssmenuPFM:after,#cssmenuPFM ul:after {content: '';display: block;clear: both;}#cssmenuPFM > ul > li:first-child {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuPFM > ul > li:last-child {-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuPFM > ul > li ul ul {-moz-border-radius: 0 6px 6px 0;-webkit-border-radius: 0 6px 6px 0;border-radius: 0 6px 6px 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuPFM > ul > li ul ul li:first-child {-moz-border-radius: 0 5px 0 0;-webkit-border-radius: 0 5px 0 0;border-radius: 0 5px 0 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuPFM > ul > li ul ul li:last-child {-moz-border-radius: 0 0 5px 0;-webkit-border-radius: 0 0 5px 0;border-radius: 0 0 5px 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuPFM ul,#cssmenuPFM li {width: 100%;}#cssmenuPFM li {background: #dddddd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=) repeat-x;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e5e5e5), color-stop(1, #dddddd));background-image: -webkit-linear-gradient(top, #e5e5e5, #dddddd);background-image: -moz-linear-gradient(top, #e5e5e5, #dddddd);background-image: -ms-linear-gradient(top, #e5e5e5, #dddddd);background-image: -o-linear-gradient(top, #e5e5e5, #dddddd);background-image: linear-gradient(#e5e5e5, #dddddd);}#cssmenuPFM li:hover {background: #f6f6f6;}#cssmenuPFM a {color: #666666;line-height: 160%;padding: 11px 28px 11px 28px;width: 144px;}#cssmenuPFM ul ul {width: 200px;border: 1px solid #dddddd;-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}#cssmenuPFM ul ul li {background: #f6f6f6;}#cssmenuPFM ul ul li:hover {background: #dddddd;}#cssmenuPFM ul ul li:hover a {color: #AE0001;}#cssmenuPFM ul ul li ul li {background: #dddddd;}#cssmenuPFM ul ul li ul li:hover {background: #b7b7b7;}#cssmenuPFM .has-sub {position: relative;}#cssmenuPFM .has-sub:after,#cssmenuPFM .has-sub > ul > .has-sub:hover:after {content: '';display: block;width: 10px;height: 9px;position: absolute;right: 5px;top: 50%;margin-top: -5px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////MzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzNzc3l5eXg4ODZ2dnMzMzi4uLS0tLe3t7Q0NDV1dXj4+PW1tbk5OTc3NzPz8/R0dH0Zv5RAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);-webkit-transform: rotate(360deg);transform: rotate(360deg);}#cssmenuPFM .has-sub > ul > .has-sub:after,#cssmenuPFM .has-sub:hover:after {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAMAAAA8eE0hAAAAUVBMVEX////d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3e3t729vbx8fHq6urd3d3z8/Pj4+Pv7+/h4eHm5ub09PTn5+f19fXt7e3g4ODi4uLUsVdlAAAAC3RSTlMAM2YekAmlPHuEAwArv7wAAAA/SURBVHheY2Dl5mdigABGKV5BNnYok4dHQpKFGcrkEefj5gAzQUBABM7kFYQyRcX4mUBMkEpOLrA2IWGwfgYAn0UDZszv8IwAAAAASUVORK5CYII=);}</style>  <div id='cssmenuPFM'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Opera Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>@charset "UTF-8";/* Starter CSS for Flyout Menu */#cssmenuOF {padding: 0;margin: 0;border: 0;}#cssmenuOF ul,#cssmenuOF ul li,#cssmenuOF ul ul {list-style: none;margin: 0;padding: 0;}#cssmenuOF ul {position: relative;z-index: 597;float: left;width: 200px;}#cssmenuOF ul li {float: left;min-height: 1px;line-height: 1em;vertical-align: middle;}#cssmenuOF ul li.hover,#cssmenuOF ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuOF ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenuOF ul ul li {float: none;}#cssmenuOF ul ul ul {top: 1px;left: 99%;}#cssmenuOF ul li:hover > ul {visibility: visible;}#cssmenuOF ul ul {top: 1px;left: 99%;}#cssmenuOF ul li {float: none;}#cssmenuOF ul {font-weight: bold;}#cssmenuOF ul ul {margin-top: 1px;}#cssmenuOF ul ul li {font-weight: normal;}/* Custom CSS Styles */#cssmenuOF {border-radius: 5px 0 0 5px;-moz-border-radius: 5px 0 0 5px;-webkit-border-radius: 5px 0 0 5px;background-color: #141414;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat: repeat-x;width: 200px;}#cssmenuOF:after {content: '';display: block;clear: both;}#cssmenuOF a {background-color: #141414;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat: repeat-x;color: #ffffff;display: block;font-family: Helvetica, Arial, Verdana, sans-serif;font-size: 12px;font-weight: normal;line-height: 180%;padding: 13px 20px;text-decoration: none;}#cssmenuOF ul {border-right: 2px solid #0fa1e0;list-style: none;}#cssmenuOF > ul {float: left;}#cssmenuOF > ul > li:hover:after {content: '';display: block;width: 0;height: 0;position: absolute;right: 0;top: 50%;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid #0fa1e0;margin-top: -10px;}#cssmenuOF > 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;}#cssmenuOF > ul > li:last-child > a {border-radius: 0 0 0 5px;-moz-border-radius: 0 0 0 5px;-webkit-border-radius: 0 0 0 5px;}#cssmenuOF > ul > li.active a {background-color: #070707;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat: repeat-x;}#cssmenuOF > ul > li.active > a {box-shadow: inset 0 0 5px black;-moz-box-shadow: inset 0 0 5px black;-webkit-box-shadow: inset 0 0 5px black;}#cssmenuOF > ul > li:hover > a {background-color: #070707;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==);background-repeat: repeat-x;box-shadow: inset 0 0 5px black;-moz-box-shadow: inset 0 0 5px black;-webkit-box-shadow: inset 0 0 5px black;color: #ffffff;}#cssmenuOF .has-sub {z-index: 1;}#cssmenuOF .has-sub:hover > ul {display: block;}#cssmenuOF .has-sub ul {display: none;position: absolute;width: 150px;top: 5px;left: 100%;}#cssmenuOF .has-sub ul a {font-size: 12px;}#cssmenuOF .has-sub ul li {*margin-bottom: -1px;}#cssmenuOF .has-sub ul li a {background: #0fa1e0;border-bottom: 1px dotted #31b7f1;filter: none;font-size: 11px;display: block;line-height: 120%;padding: 10px;color: #ffffff;}#cssmenuOF .has-sub ul li:hover a {background: #0c82b5;}#cssmenuOF .has-sub .has-sub:hover > ul {display: block;}#cssmenuOF .has-sub .has-sub ul {display: none;position: absolute;left: 100%;top: 0;}#cssmenuOF .has-sub .has-sub ul li a {background: #0c82b5;border-bottom: 1px dotted #0fa1e0;}#cssmenuOF .has-sub .has-sub ul li a:hover {background: #09638a;}</style>  <div id='cssmenuOF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Flat Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);/* Please Keep this font import at the very top of any CSS file */@charset "UTF-8";/* Starter CSS for Flyout Menu */#cssmenuFF {padding: 0;margin: 0;border: 0;line-height: 1;}#cssmenuFF ul,#cssmenuFF ul li,#cssmenuFF ul ul {list-style: none;margin: 0;padding: 0;}#cssmenuFF ul {position: relative;z-index: 597;float: left;}#cssmenuFF ul li {float: left;min-height: 1px;line-height: 1em;vertical-align: middle;position: relative;}#cssmenuFF ul li.hover,#cssmenuFF ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuFF ul ul {visibility: hidden;position: absolute;top: 100%;left: 0px;z-index: 598;width: 100%;}#cssmenuFF ul ul li {float: none;}#cssmenuFF ul ul ul {top: -2px;right: 0;}#cssmenuFF ul li:hover > ul {visibility: visible;}#cssmenuFF ul ul {top: 1px;left: 99%;}#cssmenuFF ul li {float: none;}#cssmenuFF ul ul {margin-top: 1px;}#cssmenuFF ul ul li {font-weight: normal;}/* Custom CSS Styles */#cssmenuFF {width: 200px;background: #333333;font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;zoom: 1;font-size: 12px;}#cssmenuFF:before {content: '';display: block;}#cssmenuFF:after {content: '';display: table;clear: both;}#cssmenuFF a {display: block;padding: 15px 20px;color: #ffffff;text-decoration: none;text-transform: uppercase;}#cssmenuFF > ul {width: 200px;}#cssmenuFF ul ul {width: 200px;}#cssmenuFF > ul > li > a {border-right: 4px solid #1b9bff;color: #ffffff;}#cssmenuFF > ul > li > a:hover {color: #ffffff;}#cssmenuFF > ul > li.active a {background: #1b9bff;}#cssmenuFF > ul > li a:hover,#cssmenuFF > ul > li:hover a {background: #1b9bff;}#cssmenuFF li {position: relative;}#cssmenuFF ul li.has-sub > a:after {content: '+';position: absolute;top: 50%;right: 15px;margin-top: -6px;}#cssmenuFF ul ul li.first {-webkit-border-radius: 0 3px 0 0;-moz-border-radius: 0 3px 0 0;border-radius: 0 3px 0 0;}#cssmenuFF ul ul li.last {-webkit-border-radius: 0 0 3px 0;-moz-border-radius: 0 0 3px 0;border-radius: 0 0 3px 0;border-bottom: 0;}#cssmenuFF ul ul {-webkit-border-radius: 0 3px 3px 0;-moz-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;}#cssmenuFF ul ul {border: 1px solid #0082e7;}#cssmenuFF ul ul a {font-size: 12px;color: #ffffff;}#cssmenuFF ul ul a:hover {color: #ffffff;}#cssmenuFF ul ul li {border-bottom: 1px solid #0082e7;}#cssmenuFF ul ul li:hover > a {background: #4eb1ff;color: #ffffff;}#cssmenuFF.align-right > ul > li > a {border-left: 4px solid #1b9bff;border-right: none;}#cssmenuFF.align-right {float: right;}#cssmenuFF.align-right li {text-align: right;}#cssmenuFF.align-right ul li.has-sub > a:before {content: '+';position: absolute;top: 50%;left: 15px;margin-top: -6px;}#cssmenuFF.align-right ul li.has-sub > a:after {content: none;}#cssmenuFF.align-right ul ul {visibility: hidden;position: absolute;top: 0;left: -100%;z-index: 598;width: 100%;}#cssmenuFF.align-right ul ul li.first {-webkit-border-radius: 3px 0 0 0;-moz-border-radius: 3px 0 0 0;border-radius: 3px 0 0 0;}#cssmenuFF.align-right ul ul li.last {-webkit-border-radius: 0 0 0 3px;-moz-border-radius: 0 0 0 3px;border-radius: 0 0 0 3px;}#cssmenuFF.align-right ul ul {-webkit-border-radius: 3px 0 0 3px;-moz-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}</style>  <div id='cssmenuFF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Rounded Slate DropDown Menu

Preview

[Show Code][Hide Code]

<style>/* Starter CSS for Flyout Menu */#cssmenuRSF {padding: 0;margin: 0;border: 0;}#cssmenuRSF ul,li {list-style: none;margin: 0;padding: 0;}#cssmenuRSF ul {position: relative;z-index: 597;float: left;}#cssmenuRSF ul li {float: left;min-height: 1px;line-height: 1em;vertical-align: middle;}#cssmenuRSF ul li.hover,#cssmenuRSF ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuRSF ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenuRSF ul ul li {float: none;}#cssmenuRSF ul li:hover > ul {visibility: visible;}#cssmenuRSF ul ul {top: 0;left: 100%;}#cssmenuRSF ul li {float: none;}/* Custom Stuff */#cssmenuRSF span,#cssmenuRSF a {display: inline-block;font-family: Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;}#cssmenuRSF {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;-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);box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);font-weight: 600;width: 200px;}#cssmenuRSF:after,#cssmenuRSF ul:after {content: '';display: block;clear: both;}#cssmenuRSF > ul > li:first-child {-moz-border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuRSF > ul > li:last-child {-moz-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuRSF > ul > li ul ul li:first-child {-moz-border-radius: 0 5px 0 0;-webkit-border-radius: 0 5px 0 0;border-radius: 0 5px 0 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuRSF > ul > li ul ul li:last-child {-moz-border-radius: 0 0 5px 0;-webkit-border-radius: 0 0 5px 0;border-radius: 0 0 5px 0;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;}#cssmenuRSF ul,#cssmenuRSF li {width: 100%;}#cssmenuRSF li {background: #c0bebf url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAMAAAB8fKKlAAAAmVBMVEXy7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7erx7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7ery7eoO3g4TAAAAMnRSTlP8+fbz7+vn497Z1M/KxL+5s66oopuVj4mDfHZwamRdV1FMRkA7NTArJiEcGBQQDAkGA02z+X0AAABLSURBVHheDcGDEQMBAACwvFnbtrv/cO3F949AKBJLpDK5QqlSa2hqaevo6ukbGBoZm5iamVtYWlnb2NrZOzg6Obu4url7eHp5+/wAxikFLnlTZcYAAAAASUVORK5CYII=) repeat-x;background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f2edea), color-stop(1, #c0bebf));background-image: -webkit-linear-gradient(top, #f2edea, #c0bebf);background-image: -moz-linear-gradient(top, #f2edea, #c0bebf);background-image: -ms-linear-gradient(top, #f2edea, #c0bebf);background-image: -o-linear-gradient(top, #f2edea, #c0bebf);background-image: linear-gradient(#f2edea, #c0bebf);}#cssmenuRSF li:hover,#cssmenuRSF li.active {background: #606a76 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA0CAMAAAB8fKKlAAAAmVBMVEVKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmJKVmL///9KVmL3Z0MtAAAAMnRSTlP8+fby7+vm4t3Y087Iw723sauln5mTjIaAeXNsZmBaVE5IQjw3MSwnIh0ZFBANCQYDAAm6nKYAAABLSURBVHheDcGDEQMBAACwvFnbtrv/cO3F949AKBJLpDK5QqlSa2hqaevo6ukbGBoZm5iamVtYWlnb2NrZOzg6Obu4url7eHp5+/wAxikFLnlTZcYAAAAASUVORK5CYII=) repeat-x;-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);box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4a5662), color-stop(1, #606a76));background-image: -webkit-linear-gradient(top, #4a5662, #606a76);background-image: -moz-linear-gradient(top, #4a5662, #606a76);background-image: -ms-linear-gradient(top, #4a5662, #606a76);background-image: -o-linear-gradient(top, #4a5662, #606a76);background-image: linear-gradient(#4a5662, #606a76);}#cssmenuRSF li:hover > a,#cssmenuRSF li.active > a {color: #FFF;}#cssmenuRSF a {color: #666666;line-height: 160%;padding: 16px 8px 16px 28px;width: 164px;}#cssmenuRSF ul ul {-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);width: 200px;}#cssmenuRSF ul ul li {background: #606a76;border-bottom: 1px solid #59636F;-moz-box-shadow: inset 0 1px 0 #66707c;-webkit-box-shadow: inset 0 1px 0 #66707c;box-shadow: inset 0 1px 0 #66707c;}#cssmenuRSF ul ul li:hover {background: #4a5662;}#cssmenuRSF ul ul li a {color: #FFF;}#cssmenuRSF ul ul a,#cssmenuRSF ul ul a span {font-size: 12px;}</style>  <div id='cssmenuRSF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

3D Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>@import url(http://fonts.googleapis.com/css?family=Roboto:700);#cssmenuV3D,#cssmenuV3D ul,#cssmenuV3D ul li,#cssmenuV3D ul li a {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuV3D {font-family: Roboto, sans-serif;}#cssmenuV3D > ul {width: 180px;background: #ffffff;}#cssmenuV3D > ul > li > a {padding: 12px 15px;font-size: 14px;color: #666666;font-weight: 700;text-decoration: none;-webkit-transition: color .2s ease;-o-transition: color .2s ease;-ms-transition: color .2s ease;transition: color .2s ease;}#cssmenuV3D > ul > li:hover > a,#cssmenuV3D > ul > li > a:hover {color: #222222;}#cssmenuV3D ul li.has-sub > a::after {position: absolute;right: 15px;display: block;width: 10px;height: 10px;content: "";border-radius: 2px;}#cssmenuV3D > ul > li.has-sub > a::after {top: 14px;background: #666666;}#cssmenuV3D > ul > li.has-sub:hover > a::after,#cssmenuV3D > ul > li.has-sub > a:hover::after {background: #222222;}#cssmenuV3D ul ul li.has-sub > a::after {top: 13px;background: #ffffff;}#cssmenuV3D ul ul li.has-sub:hover > a::after,#cssmenuV3D ul ul li.has-sub > a:hover::after {background: #dddddd;}#cssmenuV3D ul li.has-sub > a::before {position: absolute;right: 15px;z-index: 2;display: block;width: 0;height: 0;border: 3px solid transparent;content: "";}#cssmenuV3D > ul > li.has-sub > a::before {top: 16px;border-left-color: #ffffff;}#cssmenuV3D ul ul li.has-sub > a::before {top: 15px;border-left-color: #2e353b;}#cssmenuV3D ul {-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}#cssmenuV3D ul ul {position: absolute;top: 0;left: -9999px;width: 180px;background: #2e353b;opacity: 0;-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;-o-transition: opacity 0.2s ease, -o-transform 0.2s ease;transition: opacity .2s ease, transform .2s ease;-webkit-transform: rotate3d(0, 1, 0, 45deg);-moz-transform: rotate3d(0, 1, 0, 45deg);transform: rotate3d(0, 1, 0, 45deg);-webkit-transform-origin: left center;-moz-transform-origin: left center;transform-origin: left center;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}#cssmenuV3D ul li:hover > ul {left: 100%;opacity: 1;transform: rotate3d(0, 0, 0, 0);}#cssmenuV3D ul ul::after {position: absolute;left: -8px;top: 14px;z-index: 5;display: block;width: 0;height: 0;border: 4px solid transparent;border-right-color: #2e353b;content: "";}#cssmenuV3D ul ul a {padding: 12px 15px;font-size: 12px;color: #ffffff;font-weight: 700;text-decoration: none;-webkit-transition: color .2s ease;-o-transition: color .2s ease;-ms-transition: color .2s ease;transition: color .2s ease;}#cssmenuV3D ul ul li:hover > a,#cssmenuV3D ul ul li a:hover {color: #dddddd;}</style>  <div id='cssmenuV3D'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Chromed Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>@charset "UTF-8";/* Some stylesheet reset */#cssmenuChF > ul {list-style: none;margin: 0;padding: 0;vertical-align: baseline;line-height: 1;}/* The container */#cssmenuChF > ul {display: block;position: relative;width: 150px;}/* The list elements which contain the links */#cssmenuChF > ul li {display: block;position: relative;margin: 0;padding: 0;width: 100%;}/* General link styling */#cssmenuChF > ul li a {/* Layout */display: block;position: relative;margin: 0;border-top: 1px dotted #fff;border-bottom: 1px dotted #d9d9d9;padding: 11px 20px;/* Typography */font-family: Helvetica, Arial, sans-serif;color: #e4433c;text-decoration: none;text-transform: uppercase;text-shadow: 0 1px 0 #fff;font-size: 13px;font-weight: 300;/* Background & effects */background: #eaeaea;}/* Rounded corners for the first link of the menu/submenus */#cssmenuChF > ul li:first-child > a {border-top-left-radius: 4px;border-top-right-radius: 4px;border-top: 0;}/* Rounded corners for the last link of the menu/submenus */#cssmenuChF > ul li:last-child > a {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;border-bottom: 0;}/* The hover state of the menu/submenu links */#cssmenuChF > ul li a:hover,#cssmenuChF > ul li:hover > a {color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);background: #f23f37;background: -webkit-linear-gradient(#f23f37, #e7180f);background: -moz-linear-gradient(#f23f37, #e7180f);background: linear-gradient(#f23f37, #e7180f);border-color: transparent;}/* The arrow indicating a submenu */#cssmenuChF > ul .has-sub > a::after {content: "";position: absolute;top: 16px;right: 10px;width: 0px;height: 0px;/* Creating the arrow using borders */border: 4px solid transparent;border-left: 4px solid #e4433c;}/* The same arrow, but with a darker color, to create the shadow effect */#cssmenuChF > ul .has-sub > a::before {content: "";position: absolute;top: 17px;right: 10px;width: 0px;height: 0px;/* Creating the arrow using borders */border: 4px solid transparent;border-left: 4px solid #fff;}/* Changing the color of the arrow on hover */#cssmenuChF > ul li > a:hover::after,#cssmenuChF > ul li:hover > a::after {border-left: 4px solid #fff;}#cssmenuChF > ul li > a:hover::before,#cssmenuChF > ul li:hover > a::before {border-left: 4px solid rgba(0, 0, 0, 0.25);}/* THE SUBMENUS */#cssmenuChF > ul ul {position: absolute;left: 100%;top: -9999px;padding-left: 5px;opacity: 0;width: 150px;/* The fade effect, created using an opacity transition */-webkit-transition: opacity 0.3s ease-in;-moz-transition: opacity 0.3s ease-in;transition: opacity 0.3s ease-in;}#cssmenuChF > ul ul li a {font-size: 12px;}/* Showing the submenu when the user is hovering the parent link */#cssmenuChF > ul li:hover > ul {top: 0px;opacity: 1;z-index: 1;}</style>  <div id='cssmenuChF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Green Segoe Flyout DropDown Menu

Preview

[Show Code][Hide Code]

<style>#cssmenuGF {padding: 0;margin: 0;border: 0;}#cssmenuGF ul,#cssmenuGF li {list-style: none;margin: 0;padding: 0;}#cssmenuGF ul {position: relative;z-index: 597;float: left;}#cssmenuGF ul li {float: left;min-height: 1px;line-height: 1.5em;vertical-align: middle;}#cssmenuGF ul li.hover,#cssmenuGF ul li:hover {position: relative;z-index: 599;cursor: default;}#cssmenuGF ul ul {visibility: hidden;position: absolute;top: 100%;left: 0;z-index: 598;width: 100%;}#cssmenuGF ul ul li {float: none;}#cssmenuGF ul ul,#cssmenuGF ul ul ul {top: -1px;left: 99%;}#cssmenuGF ul li:hover > ul {visibility: visible;}#cssmenuGF ul li {float: none;}#cssmenuGF a {display: block;}/* Custom CSS Styles */#cssmenuGF {font-family: "Segoe UI", Arial, sans-serif;font-size: 11px;}#cssmenuGF:after,#cssmenuGF ul:after {content: '';display: block;clear: both;}#cssmenuGF ul {background: #F0EFEA;border: 1px solid #aaaaaa;padding: 4px;width: 200px;}#cssmenuGF ul li {color: #000000;position: relative;}#cssmenuGF ul li.hover,#cssmenuGF ul li:hover {background: #61b72d;background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));background: -webkit-linear-gradient(#61b72d 0%, #4b8e23 100%);background: linear-gradient(#61b72d 0%, #4b8e23 100%);color: #FFF;}#cssmenuGF ul li.hover > a,#cssmenuGF ul li:hover > a {color: #FFF;border: 1px solid #4b8e23;}#cssmenuGF ul ul {width: 150px;}#cssmenuGF a {border: 1px solid transparent;padding: 3px 10px;}#cssmenuGF a:link,#cssmenuGF a:visited {color: #000000;text-decoration: none;}#cssmenuGF a:hover {background: #61b72d;background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));background: -webkit-linear-gradient(#61b72d 0%, #4b8e23 100%);background: linear-gradient(#61b72d 0%, #4b8e23 100%);color: #FFF;}#cssmenuGF a:active {color: #ffa500;}#cssmenuGF .has-sub:hover > a:after,#cssmenuGF .has-sub.hover > a:after {border-color: transparent transparent transparent #FFF;}#cssmenuGF .has-sub > a:after {content: '';width: 0px;height: 0px;border-style: solid;border-width: 4px 0 4px 4px;border-color: transparent transparent transparent #808080;position: absolute;top: 50%;right: 5%;margin-top: -4px;-webkit-transform: rotate(360deg);}</style>  <div id='cssmenuGF'><ul><li><a href='#'>Home</a></li><li class='active has-sub'><a href='#'>Galih</a>      <ul><li class='has-sub'><a href='#'>Galih1</a>            <ul><li><a href='#'>Sub1 Galih1</a></li><li><a href='#'>Sub2 Galih1</a></li></ul></li><li class='has-sub'><a href='#'>Galih2</a>            <ul><li><a href='#'>Sub1 Galih2</a></li><li><a href='#'>Sub2 Galih</a></li></ul></li></ul></li><li class='has-sub'><a href='#'>Gasendra</a>      <ul><li><a href='#'>Gasendra1</a></li><li><a href='#'>Gasendra2</a></li></ul></li><li><a href='#'>Contact</a></li></ul></div>

Tutorial How to Add Drop Down Menu

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