Free Horizontal Drop Down Menu for Blogger Page 3

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.

Responsive Jay DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);@charset "UTF-8";/* Base Styles */#cssmenuRJ,#cssmenuRJ ul,#cssmenuRJ li,#cssmenuRJ 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;}#cssmenuRJ a {line-height: 1.5;}#cssmenuRJ {width: 100%;background: #fff;}#cssmenuRJ > ul {border: 1px solid #000000;-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);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%);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}#cssmenuRJ > ul:after {clear: both;content: '';display: table;}@media all and (max-width: 480px) {#cssmenuRJ > ul {max-height: 32px;overflow: hidden;-webkit-transition: max-height 0.5s;transition: max-height 0.5s;}#cssmenuRJ.expand ul {max-height: 900px;}}#cssmenuRJ > ul > li {border-right: 1px solid #000000;-moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);-webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);float: left;}#cssmenuRJ > ul > li.mobile {display: none;}#cssmenuRJ > ul > li.active {background: #444444;background: -moz-linear-gradient(#444444 0%, #323232 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #323232));background: -webkit-linear-gradient(#444444 0%, #323232 100%);background: linear-gradient(#444444 0%, #323232 100%);}@media all and (max-width: 480px) {#cssmenuRJ > ul > li {border-right: 0 none;-moz-box-shadow: 0 0 0 transparent;-webkit-box-shadow: 0 0 0 transparent;box-shadow: 0 0 0 transparent;display: block;float: none;}#cssmenuRJ > ul > li.mobile {display: block;}#cssmenuRJ > ul > li.mobile i {float: right;font-style: normal;}}#cssmenuRJ > ul > li:last-child {border-right: 0 none;-moz-box-shadow: 0 0 0 transparent;-webkit-box-shadow: 0 0 0 transparent;box-shadow: 0 0 0 transparent;-webkit-border-radius: 0 4px 4px 0;-moz-border-radius: 0 4px 4px 0;border-radius: 0 4px 4px 0;}#cssmenuRJ > ul > li:last-child ul {left: auto;right: 0;}#cssmenuRJ > ul > li.mobile {border-right: 0 none;-moz-box-shadow: 0 0 0 transparent;-webkit-box-shadow: 0 0 0 transparent;box-shadow: 0 0 0 transparent;}#cssmenuRJ > ul > li > a {margin: 0 0 2px 0;font-size: 12px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;}#cssmenuRJ > ul > li > a > span {display: block;padding: 6px 10px;font-weight: bold;}#cssmenuRJ > ul > li > a:hover {text-decoration: none;}#cssmenuRJ > ul > li.active {border-bottom: none;}#cssmenuRJ > ul > li.active > a {color: #fff;text-shadow: 0 1px 1px #000;}/* Sub menu */#cssmenuRJ ul ul {background: #f9f9f9;border: 1px solid #cccccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);padding: 5px 12px;display: none;position: absolute;top: 33px;left: 0;width: 200px;z-index: 1;}@media all and (max-width: 480px) {#cssmenuRJ ul ul {position: relative;top: 0;width: 100%;}}#cssmenuRJ ul ul li {padding: 3px 0;}#cssmenuRJ ul ul a {color: #999999;display: block;font-size: 12px;font-weight: bold;}#cssmenuRJ ul ul a:hover {color: #444444;}</style><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuRJ > ul').prepend('<li class=\"mobile\"><a href=\"#\"><span>Menu <i>?</i></span></a></li>'); $('#cssmenuRJ > ul > li > a').click(function(e) { $('#cssmenuRJ 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'))) { $('#cssmenuRJ ul ul:visible').slideUp('normal'); checkElement.slideDown('normal'); } if( $(this).parent().hasClass('mobile') ) { e.preventDefault(); $('#cssmenuRJ').toggleClass('expand'); } if($(this).closest('li').find('ul').children().length == 0) { return true; } else { return false; } }); }); } )( jQuery ); </script> <br /><div id="cssmenuRJ"><ul><li class="active"><a href="#">Home</a></li><li class="has-sub"><a href="#">Galih</a> <ul><li><a href="#">Galih1</a></li><li><a href="#">Galih2</a></li><li class="last"><a href="#">Galih3</a></li></ul></li><li class="has-sub"><a href="#">Gasendra</a> <ul><li><a href="#">Gasendra1</a></li><li class="last"><a href="#">Gasendra2</a></li></ul></li><li class="last"><a href="#">Contact</a></li></ul></div>

Animated responsive DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);#cssmenuAR {background: #4cb6ea;margin: 0;width: auto;padding: 0;line-height: 1;display: block;position: relative;font-family: 'PT Sans', sans-serif;}#cssmenuAR ul {list-style: none;margin: 0;padding: 0;display: block;}#cssmenuAR ul:after,#cssmenuAR:after {content: " ";display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}#cssmenuAR ul li {margin: 0;padding: 0;display: block;position: relative;}#cssmenuAR ul li a {text-decoration: none;display: block;margin: 0;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}#cssmenuAR ul li ul {position: absolute;left: -9999px;top: auto;}#cssmenuAR ul li ul li {max-height: 0;position: absolute;-webkit-transition: max-height 0.4s ease-out;-moz-transition: max-height 0.4s ease-out;-ms-transition: max-height 0.4s ease-out;-o-transition: max-height 0.4s ease-out;transition: max-height 0.4s ease-out;background: #ffffff;}#cssmenuAR ul li ul li.has-sub:after {display: block;position: absolute;content: "";height: 10px;width: 10px;border-radius: 5px;background: #000000;z-index: 1;top: 13px;right: 15px;}#cssmenuAR.align-right ul li ul li.has-sub:after {right: auto;left: 15px;}#cssmenuAR ul li ul li.has-sub:before {display: block;position: absolute;content: "";height: 0;width: 0;border: 3px solid transparent;border-left-color: #ffffff;z-index: 2;top: 15px;right: 15px;}#cssmenuAR.align-right ul li ul li.has-sub:before {right: auto;left: 15px;border-left-color: transparent;border-right-color: #ffffff;}#cssmenuAR ul li ul li a {font-size: 14px;font-weight: 400;text-transform: none;color: #000000;letter-spacing: 0;display: block;width: 170px;padding: 11px 10px 11px 20px;}#cssmenuAR ul li ul li:hover > a,#cssmenuAR ul li ul li.active > a {color: #4cb6ea;}#cssmenuAR ul li ul li:hover:after,#cssmenuAR ul li ul li.active:after {background: #4cb6ea;}#cssmenuAR ul li ul li:hover > ul {left: 100%;top: 0;}#cssmenuAR ul li ul li:hover > ul > li {max-height: 72px;position: relative;}#cssmenuAR > ul > li {float: left;}#cssmenuAR.align-center > ul > li {float: none;display: inline-block;}#cssmenuAR.align-center > ul {text-align: center;}#cssmenuAR.align-center ul ul {text-align: left;}#cssmenuAR.align-right > ul {float: right;}#cssmenuAR.align-right > ul > li:hover > ul {left: auto;right: 0;}#cssmenuAR.align-right ul ul li:hover > ul {right: 100%;left: auto;}#cssmenuAR.align-right ul ul li a {text-align: right;}#cssmenuAR > ul > li:after {content: "";display: block;position: absolute;width: 100%;height: 0;top: 0;z-index: 0;background: #ffffff;-webkit-transition: height .2s;-moz-transition: height .2s;-ms-transition: height .2s;-o-transition: height .2s;transition: height .2s;}#cssmenuAR > ul > li.has-sub > a {padding-right: 40px;}#cssmenuAR > ul > li.has-sub > a:after {display: block;content: "";background: #ffffff;height: 12px;width: 12px;position: absolute;border-radius: 13px;right: 14px;top: 16px;}#cssmenuAR > ul > li.has-sub > a:before {display: block;content: "";border: 4px solid transparent;border-top-color: #4cb6ea;z-index: 2;height: 0;width: 0;position: absolute;right: 16px;top: 21px;}#cssmenuAR > ul > li > a {color: #ffffff;padding: 15px 20px;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;font-size: 14px;z-index: 2;position: relative;}#cssmenuAR > ul > li:hover:after,#cssmenuAR > ul > li.active:after {height: 100%;}#cssmenuAR > ul > li:hover > a,#cssmenuAR > ul > li.active > a {color: #000000;}#cssmenuAR > ul > li:hover > a:after,#cssmenuAR > ul > li.active > a:after {background: #000000;}#cssmenuAR > ul > li:hover > a:before,#cssmenuAR > ul > li.active > a:before {border-top-color: #ffffff;}#cssmenuAR > ul > li:hover > ul {left: 0;}#cssmenuAR > ul > li:hover > ul > li {max-height: 72px;position: relative;}#cssmenuAR #menu-button {display: none;}#cssmenuAR > ul > li > a {display: block;}#cssmenuAR > ul > li {width: auto;}#cssmenuAR > ul > li > ul {width: 170px;display: block;}#cssmenuAR > ul > li > ul > li {width: 170px;display: block;}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {#cssmenuAR > ul {max-height: 0;overflow: hidden;-webkit-transition: max-height 0.35s ease-out;-moz-transition: max-height 0.35s ease-out;-ms-transition: max-height 0.35s ease-out;-o-transition: max-height 0.35s ease-out;transition: max-height 0.35s ease-out;}#cssmenuAR > ul > li > ul {width: 100%;display: block;}#cssmenuAR.align-right ul li a {text-align: left;}#cssmenuAR > ul > li > ul > li {width: 100%;display: block;}#cssmenuAR.align-right ul ul li a {text-align: left;}#cssmenuAR > ul > li > ul > li > a {width: 100%;display: block;}#cssmenuAR ul li ul li a {width: 100%;}#cssmenuAR.align-center > ul {text-align: left;}#cssmenuAR.align-center > ul > li {display: block;}#cssmenuAR > ul.open {max-height: 1000px;border-top: 1px solid rgba(110, 110, 110, 0.25);}#cssmenuAR ul {width: 100%;}#cssmenuAR ul > li {float: none;width: 100%;}#cssmenuAR ul li a {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 12px 20px;}#cssmenuAR ul > li:after {display: none;}#cssmenuAR ul li.has-sub > a:after,#cssmenuAR ul li.has-sub > a:before,#cssmenuAR ul li ul li.has-sub:after,#cssmenuAR ul li ul li.has-sub:before {display: none;}#cssmenuAR ul li ul,#cssmenuAR ul li ul li ul,#cssmenuAR ul li ul li:hover > ul,#cssmenuAR.align-right ul li ul,#cssmenuAR.align-right ul li ul li ul,#cssmenuAR.align-right ul li ul li:hover > ul {left: 0;position: relative;right: auto;}#cssmenuAR ul li ul li,#cssmenuAR ul li:hover > ul > li {max-height: 999px;position: relative;background: none;}#cssmenuAR ul li ul li a {padding: 8px 20px 8px 35px;color: #ffffff;}#cssmenuAR ul li ul ul li a {padding: 8px 20px 8px 50px;}#cssmenuAR ul li ul li:hover > a {color: #000000;}#cssmenuAR #menu-button {display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;padding: 15px 20px;text-transform: uppercase;font-weight: 700;font-size: 14px;letter-spacing: 1px;color: #ffffff;cursor: pointer;}#cssmenuAR #menu-button:after {display: block;content: '';position: absolute;height: 3px;width: 22px;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;right: 20px;top: 16px;}#cssmenuAR #menu-button:before {display: block;content: '';position: absolute;height: 3px;width: 22px;border-top: 2px solid #ffffff;right: 20px;top: 26px;}}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuAR').prepend('<div id="menu-button">Menu</div>'); $('#cssmenuAR #menu-button').on('click', function(){ var menu = $(this).next('ul'); if (menu.hasClass('open')) { menu.removeClass('open'); } else { menu.addClass('open'); } }); }); } )( jQuery ); </script> <div id='cssmenuAR'><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 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>

jQuery Responsive DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);#cssmenujQR,#cssmenujQR ul,#cssmenujQR ul li,#cssmenujQR ul li a,#cssmenujQR #menu-button {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;}#cssmenujQR:after,#cssmenujQR > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#cssmenujQR #menu-button {display: none;}#cssmenujQR {width: auto;border-radius: 5px;font-family: 'Open Sans', Helvetica, sans-serif;background: #3db2e1;background: -o-linear-gradient(top, #69c4e8, #21a1d4);background: -ms-linear-gradient(top, #69c4e8, #21a1d4);background: -webkit-linear-gradient(top, #69c4e8, #21a1d4);background: -moz-linear-gradient(top, #69c4e8, #21a1d4);background: linear-gradient(to bottom, #69c4e8, #21a1d4);box-shadow: inset 0 -3px 0 #1f97c7, inset 0 -3px 3px #1f9acc, inset 0 2px 2px #9ad7ef, inset 1px 0 2px #22a4d9, inset -1px 0 2px #22a4d9, 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.06), 0 3px 3px rgba(0, 0, 0, 0.17), 2px 1px 2px rgba(0, 0, 0, 0.05), -2px 1px 2px rgba(0, 0, 0, 0.05);}#cssmenujQR.align-center > ul {font-size: 0;text-align: center;}#cssmenujQR.align-center ul ul {text-align: left;}#cssmenujQR.align-center > ul > li {display: inline-block;float: none;}#cssmenujQR.align-right > ul > li {float: right;}#cssmenujQR.align-right ul ul {text-align: right;}#cssmenujQR > ul > li {float: left;}#cssmenujQR > ul > li > a {padding: 20px 25px;font-size: 13px;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);font-weight: 700;text-decoration: none;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenujQR > ul > li:hover > a,#cssmenujQR > ul > li > a:hover,#cssmenujQR > ul > li.active > a {color: #cae5fd;}#cssmenujQR > ul > li.has-sub > a {padding-right: 40px;}#cssmenujQR ul > li.has-sub > a:after {content: '';position: absolute;right: 5px;top: 17.5px;display: block;width: 18px;height: 18px;border-radius: 9px;background: #3db2e1;background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;background-size: 36px 36px;background-position: 0 0;background-repeat: no-repeat;-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;}#cssmenujQR ul > li.has-sub:hover > a:after {background-position: 0 -18px;}#cssmenujQR ul > li.has-sub > a:before {content: '';position: absolute;right: 11px;top: 25.5px;display: block;width: 0;height: 0;border: 3px solid transparent;border-top-color: #ffffff;z-index: 99;}#cssmenujQR ul > li.has-sub:hover > a:before {border-top-color: #19799f;}#cssmenujQR ul ul {position: absolute;left: -9999px;opacity: 0;-webkit-transition: top .2s ease, opacity .2s ease;-moz-transition: top .2s ease, opacity .2s ease;-ms-transition: top .2s ease, opacity .2s ease;-o-transition: top .2s ease, opacity .2s ease;transition: top .2s ease, opacity .2s ease;}#cssmenujQR > ul > li > ul {top: 91px;padding-top: 8px;border-radius: 5px;}#cssmenujQR > ul > li:hover > ul {left: auto;top: 51px;opacity: 1;}#cssmenujQR.align-right > ul > li:hover > ul {right: 0;}#cssmenujQR ul ul ul {top: 40px;}#cssmenujQR ul ul > li:hover > ul {top: 0;left: 178px;padding-left: 10px;opacity: 1;}#cssmenujQR.align-right ul ul > li:hover > ul {left: auto;right: 178px;padding-left: 0;padding-right: 10px;opacity: 1;}#cssmenujQR ul ul li a {width: 180px;padding: 12px 25px;font-size: 13px;font-weight: 700;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);color: #ffffff;text-decoration: none;background: #3db2e1;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenujQR ul ul li:hover > a,#cssmenujQR ul ul li > a:hover,#cssmenujQR ul ul li.active > a {color: #cae5fd;}#cssmenujQR ul ul li:first-child > a {border-top-left-radius: 5px;border-top-right-radius: 5px;box-shadow: inset 0 2px 2px #88d0ed;}#cssmenujQR ul ul li:last-child > a {border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;box-shadow: inset 0 -3px 0 #27a9de, inset 0 -3px 3px #1f9acc, 0 1px 1px rgba(0, 0, 0, 0.03), 0 2px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.13);}#cssmenujQR ul ul > li.has-sub > a:after {right: 12px;top: 9.5px;background: #3db2e1;background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;background-size: 36px 36px;background-position: 0 0;background-repeat: no-repeat;}#cssmenujQR.align-right ul ul > li.has-sub > a:after {right: auto;left: 12px;}#cssmenujQR ul ul > li.has-sub:hover > a:after {background-position: 0 -18px;}#cssmenujQR ul ul > li.has-sub > a:before {top: 15.5px;right: 16px;border-top-color: transparent;border-left-color: #ffffff;}#cssmenujQR.align-right ul ul > li.has-sub > a:before {top: 15.5px;right: auto;left: 16px;border-top-color: transparent;border-right-color: #ffffff;border-left-color: transparent;}#cssmenujQR ul ul > li.has-sub:hover > a:before {border-top-color: transparent;border-left-color: #1c89b5;}#cssmenujQR.align-right ul ul > li.has-sub:hover > a:before {border-top-color: transparent;border-left-color: transparent;border-right-color: #1c89b5;}@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {#cssmenujQR {width: 100%;}#cssmenujQR ul,#cssmenujQR ul ul,#cssmenujQR ul ul ul,#cssmenujQR > ul,#cssmenujQR.align-center > ul,#cssmenujQR > ul > li > ul,#cssmenujQR > ul > li:hover > ul,#cssmenujQR ul ul li:hover > ul,#cssmenujQR ul ul ul li:hover > ul,#cssmenujQR.align-right ul ul,#cssmenujQR.align-right ul ul li:hover > ul,#cssmenujQR.align-right ul ul ul li:hover > ul {position: relative;left: 0;right: auto;top: 0;width: 100%;display: none;padding: 0;opacity: 1;text-align: left;}#cssmenujQR ul li {width: 100%;border-top: 1px solid rgba(120, 120, 120, 0.2);}#cssmenujQR > ul > li > a,#cssmenujQR ul ul li a,#cssmenujQR ul ul li:first-child > a,#cssmenujQR ul ul li:last-child > a {width: 100%;border-radius: 0;box-shadow: none;background: none;}#cssmenujQR ul li a {padding-left: 12.5px;}#cssmenujQR ul ul li a {padding: 14px 25px 14px 27.5px;}#cssmenujQR ul ul ul li a {padding-left: 42.5px;}#cssmenujQR ul ul ul ul li a {padding-left: 57.5px;}#cssmenujQR > ul > li.has-sub > a:after,#cssmenujQR > ul > li.has-sub > a:before,#cssmenujQR ul ul li.has-sub > a:after,#cssmenujQR ul ul li.has-sub > a:before {display: none;}#cssmenujQR #menu-button {position: relative;display: block;padding: 20px;padding-left: 12.5px;cursor: pointer;font-size: 13px;color: #ffffff;text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}#cssmenujQR .submenu-button {position: absolute;right: 0;display: block;width: 53px;height: 53px;border-left: 1px solid rgba(120, 120, 120, 0.2);z-index: 10;cursor: pointer;}#cssmenujQR ul ul .submenu-button {height: 41px;}#cssmenujQR ul .submenu-button:after,#cssmenujQR #menu-button:after {content: '';position: absolute;right: 12.5px;top: 12.5px;display: block;width: 28px;height: 28px;border-radius: 15px;background: #3db2e1;background: -webkit-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -ms-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -moz-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: -o-linear-gradient(top, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);background: linear-gradient(to bottom, #58bde5 0%, #4ab7e3 25%, #2babde 50%, #58bde5 75%, #4ab7e3 100%);box-shadow: inset 0 -1px 1px #209ed0, inset 0 2px 1px #7fcceb;background-size: 56px 56px;background-position: 0 0;background-repeat: no-repeat;-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;}#cssmenujQR ul .submenu-button.submenu-opened:after,#cssmenujQR #menu-button.menu-opened:after {background-position: 0 -28px;}#cssmenujQR ul ul .submenu-button:after {top: 6.5px;}#cssmenujQR #menu-button:before,#cssmenujQR .submenu-button:before {content: '';position: absolute;right: 22.5px;top: 25.5px;display: block;width: 0;height: 0;border: 4px solid transparent;border-top-color: #ffffff;z-index: 99;}#cssmenujQR ul ul .submenu-button:before {top: 19.5px;}#cssmenujQR #menu-button.menu-opened:before,#cssmenujQR .submenu-button.submenu-opened:before {border-top-color: #19799f;}}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">(function($) { $.fn.menumaker = function(options) { var cssmenujQR = $(this), settings = $.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenujQR.prepend('<div id="menu-button">' + settings.title + '</div>'); $(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); } else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenujQR.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenujQR.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenujQR.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenujQR.addClass('dropdown'); if (settings.sticky === true) cssmenujQR.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenujQR.find('ul').show(); } if ($(window).width() <= 768) { cssmenujQR.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $("#cssmenujQR").menumaker({ title: "Menu", format: "multitoggle" }); }); })(jQuery); </script> <div id='cssmenujQR'><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 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>

Quartz Responsive DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>#cssmenuQRe {position: relative;height: 44px;background: #2b2f3a;width: auto;}#cssmenuQRe ul {list-style: none;padding: 0;margin: 0;line-height: 1;}#cssmenuQRe > ul {position: relative;display: block;background: #2b2f3a;width: 100%;z-index: 500;}#cssmenuQRe:after,#cssmenuQRe > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#cssmenuQRe.align-right > ul > li {float: right;}#cssmenuQRe.align-center ul {text-align: center;}#cssmenuQRe.align-center ul ul {text-align: left;}#cssmenuQRe > ul > li {display: inline-block;position: relative;margin: 0;padding: 0;}#cssmenuQRe > ul > #menu-button {display: none;}#cssmenuQRe ul li a {display: block;font-family: Helvetica, sans-serif;text-decoration: none;}#cssmenuQRe > ul > li > a {font-size: 14px;font-weight: bold;padding: 15px 20px;color: #7a8189;text-transform: uppercase;-webkit-transition: color 0.25s ease-out;-moz-transition: color 0.25s ease-out;-ms-transition: color 0.25s ease-out;-o-transition: color 0.25s ease-out;transition: color 0.25s ease-out;}#cssmenuQRe > ul > li.has-sub > a {padding-right: 32px;}#cssmenuQRe > ul > li:hover > a {color: #ffffff;}#cssmenuQRe li.has-sub::after {display: block;content: "";position: absolute;width: 0;height: 0;}#cssmenuQRe > ul > li.has-sub::after {right: 10px;top: 20px;border: 5px solid transparent;border-top-color: #7a8189;}#cssmenuQRe > ul > li:hover::after {border-top-color: #ffffff;}#indicatorContainer {position: absolute;height: 12px;width: 100%;bottom: 0px;overflow: hidden;z-index: -1;}#pIndicator {position: absolute;height: 0;width: 100%;border: 12px solid transparent;border-top-color: #2b2f3a;z-index: -2;-webkit-transition: left .25s ease;-moz-transition: left .25s ease;-ms-transition: left .25s ease;-o-transition: left .25s ease;transition: left .25s ease;}#cIndicator {position: absolute;height: 0;width: 100%;border: 12px solid transparent;border-top-color: #2b2f3a;top: -12px;right: 100%;z-index: -2;}#cssmenuQRe ul ul {position: absolute;left: -9999px;top: 70px;opacity: 0;-webkit-transition: opacity .3s ease, top .25s ease;-moz-transition: opacity .3s ease, top .25s ease;-ms-transition: opacity .3s ease, top .25s ease;-o-transition: opacity .3s ease, top .25s ease;transition: opacity .3s ease, top .25s ease;z-index: 1000;}#cssmenuQRe ul ul ul {top: 37px;padding-left: 5px;}#cssmenuQRe ul ul li {position: relative;}#cssmenuQRe > ul > li:hover > ul {left: auto;top: 44px;opacity: 1;}#cssmenuQRe.align-right > ul > li:hover > ul {left: auto;right: 0;opacity: 1;}#cssmenuQRe ul ul li:hover > ul {left: 170px;top: 0;opacity: 1;}#cssmenuQRe.align-right ul ul li:hover > ul {left: auto;right: 170px;top: 0;opacity: 1;padding-right: 5px;}#cssmenuQRe ul ul li a {width: 130px;border-bottom: 1px solid #eeeeee;padding: 10px 20px;font-size: 12px;color: #9ea2a5;background: #ffffff;-webkit-transition: all .35s ease;-moz-transition: all .35s ease;-ms-transition: all .35s ease;-o-transition: all .35s ease;transition: all .35s ease;}#cssmenuQRe.align-right ul ul li a {text-align: right;}#cssmenuQRe ul ul li:hover > a {background: #f2f2f2;color: #8c9195;}#cssmenuQRe ul ul li:last-child > a,#cssmenuQRe ul ul li.last > a {border-bottom: 0;}#cssmenuQRe > ul > li > ul::after {content: '';border: 6px solid transparent;width: 0;height: 0;border-bottom-color: #ffffff;position: absolute;top: -12px;left: 30px;}#cssmenuQRe.align-right > ul > li > ul::after {left: auto;right: 30px;}#cssmenuQRe ul ul li.has-sub::after {border: 4px solid transparent;border-left-color: #9ea2a5;right: 10px;top: 12px;-moz-transition: all .2s ease;-ms-transition: all .2s ease;-o-transition: all .2s ease;transition: all .2s ease;-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;}#cssmenuQRe.align-right ul ul li.has-sub::after {border-left-color: transparent;border-right-color: #9ea2a5;right: auto;left: 10px;}#cssmenuQRe ul ul li.has-sub:hover::after {border-left-color: #ffffff;right: -5px;-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}#cssmenuQRe.align-right ul ul li.has-sub:hover::after {border-right-color: #ffffff;border-left-color: transparent;left: -5px;-webkit-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-o-transform: rotateY(180deg);transform: rotateY(180deg);}@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {#cssmenuQRe {width: auto;}#cssmenuQRe.align-center ul {text-align: left;}#cssmenuQRe.align-right > ul > li {float: none;}#cssmenuQRe ul {width: auto;}#cssmenuQRe .submenuArrow,#cssmenuQRe #indicatorContainer {display: none;}#cssmenuQRe > ul {height: auto;display: block;}#cssmenuQRe > ul > li {float: none;}#cssmenuQRe li,#cssmenuQRe > ul > li {display: none;}#cssmenuQRe ul ul,#cssmenuQRe ul ul ul,#cssmenuQRe ul > li:hover > ul,#cssmenuQRe ul ul > li:hover > ul,#cssmenuQRe.align-right ul ul,#cssmenuQRe.align-right ul ul ul,#cssmenuQRe.align-right ul > li:hover > ul,#cssmenuQRe.align-right ul ul > li:hover > ul {position: relative;left: auto;top: auto;opacity: 1;padding-left: 0;padding-right: 0;right: auto;}#cssmenuQRe ul .has-sub::after {display: none;}#cssmenuQRe ul li a {padding: 12px 20px;}#cssmenuQRe ul ul li a {border: 0;background: none;width: auto;padding: 8px 35px;}#cssmenuQRe.align-right ul ul li a {text-align: left;}#cssmenuQRe ul ul li:hover > a {background: none;color: #8c9195;}#cssmenuQRe ul ul ul a {padding: 8px 50px;}#cssmenuQRe ul ul ul ul a {padding: 8px 65px;}#cssmenuQRe ul ul ul ul ul a {padding: 8px 80px;}#cssmenuQRe ul ul ul ul ul ul a {padding: 8px 95px;}#cssmenuQRe > ul > #menu-button {display: block;cursor: pointer;}#cssmenuQRe #menu-button > a {padding: 14px 20px;}#cssmenuQRe ul.open li,#cssmenuQRe > ul.open > li {display: block;}#cssmenuQRe > ul.open > li#menu-button > a {color: #fff;border-bottom: 1px solid rgba(150, 150, 150, 0.1);}#cssmenuQRe ul ul::after {display: none;}#cssmenuQRe #menu-button::after {display: block;content: '';position: absolute;height: 3px;width: 22px;border-top: 2px solid #7a8189;border-bottom: 2px solid #7a8189;right: 20px;top: 15px;}#cssmenuQRe #menu-button::before {display: block;content: '';position: absolute;height: 3px;width: 22px;border-top: 2px solid #7a8189;right: 20px;top: 25px;}#cssmenuQRe ul.open #menu-button::after,#cssmenuQRe ul.open #menu-button::before {border-color: #fff;}}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">( function( $ ) { $( document ).ready(function() { $('#cssmenuQRe').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>'); var activeElement = $('#cssmenuQRe>ul>li:first'); $('#cssmenuQRe>ul>li').each(function() { if ($(this).hasClass('active')) { activeElement = $(this); } }); var posLeft = activeElement.position().left; var elementWidth = activeElement.width(); posLeft = posLeft + elementWidth/2 -6; if (activeElement.hasClass('has-sub')) { posLeft -= 6; } $('#cssmenuQRe #pIndicator').css('left', posLeft); var element, leftPos, indicator = $('#cssmenuQRe pIndicator'); $("#cssmenuQRe>ul>li").hover(function() { element = $(this); var w = element.width(); if ($(this).hasClass('has-sub')) { leftPos = element.position().left + w/2 - 12; } else { leftPos = element.position().left + w/2 - 6; } $('#cssmenuQRe #pIndicator').css('left', leftPos); } , function() { $('#cssmenuQRe #pIndicator').css('left', posLeft); }); $('#cssmenuQRe>ul').prepend('<li id="menu-button"><a>Menu</a></li>'); $( "#menu-button" ).click(function(){ if ($(this).parent().hasClass('open')) { $(this).parent().removeClass('open'); } else { $(this).parent().addClass('open'); } }); }); } )( jQuery );</script> <div id='cssmenuQRe'><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 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 jQuery Responsive DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);#cssmenuFjQR,#cssmenuFjQR ul,#cssmenuFjQR ul li,#cssmenuFjQR ul li a,#cssmenuFjQR #menu-button {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;}#cssmenuFjQR:after,#cssmenuFjQR > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#cssmenuFjQR #menu-button {display: none;}#cssmenuFjQR {width: auto;font-family: 'Open Sans', sans-serif;line-height: 1;background: #ffffff;}#menu-line {position: absolute;top: 0;left: 0;height: 3px;background: #009ae1;-webkit-transition: all 0.25s ease-out;-moz-transition: all 0.25s ease-out;-ms-transition: all 0.25s ease-out;-o-transition: all 0.25s ease-out;transition: all 0.25s ease-out;}#cssmenuFjQR > ul > li {float: left;}#cssmenuFjQR.align-center > ul {font-size: 0;text-align: center;}#cssmenuFjQR.align-center > ul > li {display: inline-block;float: none;}#cssmenuFjQR.align-center ul ul {text-align: left;}#cssmenuFjQR.align-right > ul > li {float: right;}#cssmenuFjQR.align-right ul ul {text-align: right;}#cssmenuFjQR > ul > li > a {padding: 20px;font-size: 12px;text-decoration: none;text-transform: uppercase;color: #000000;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFjQR > ul > li:hover > a,#cssmenuFjQR > ul > li.active > a {color: #009ae1;}#cssmenuFjQR > ul > li.has-sub > a {padding-right: 25px;}#cssmenuFjQR > ul > li.has-sub > a::after {position: absolute;top: 21px;right: 10px;width: 4px;height: 4px;border-bottom: 1px solid #000000;border-right: 1px solid #000000;content: "";-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: border-color 0.2s ease;-moz-transition: border-color 0.2s ease;-ms-transition: border-color 0.2s ease;-o-transition: border-color 0.2s ease;transition: border-color 0.2s ease;}#cssmenuFjQR > ul > li.has-sub:hover > a::after {border-color: #009ae1;}#cssmenuFjQR ul ul {position: absolute;left: -9999px;}#cssmenuFjQR li:hover > ul {left: auto;}#cssmenuFjQR.align-right li:hover > ul {right: 0;}#cssmenuFjQR ul ul ul {margin-left: 100%;top: 0;}#cssmenuFjQR.align-right ul ul ul {margin-left: 0;margin-right: 100%;}#cssmenuFjQR ul ul li {height: 0;-webkit-transition: height .2s ease;-moz-transition: height .2s ease;-ms-transition: height .2s ease;-o-transition: height .2s ease;transition: height .2s ease;}#cssmenuFjQR ul li:hover > ul > li {height: 32px;}#cssmenuFjQR ul ul li a {padding: 10px 20px;width: 160px;font-size: 12px;background: #333333;text-decoration: none;color: #dddddd;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;}#cssmenuFjQR ul ul li:hover > a,#cssmenuFjQR ul ul li a:hover {color: #ffffff;}#cssmenuFjQR ul ul li.has-sub > a::after {position: absolute;top: 13px;right: 10px;width: 4px;height: 4px;border-bottom: 1px solid #dddddd;border-right: 1px solid #dddddd;content: "";-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: border-color 0.2s ease;-moz-transition: border-color 0.2s ease;-ms-transition: border-color 0.2s ease;-o-transition: border-color 0.2s ease;transition: border-color 0.2s ease;}#cssmenuFjQR.align-right ul ul li.has-sub > a::after {right: auto;left: 10px;border-bottom: 0;border-right: 0;border-top: 1px solid #dddddd;border-left: 1px solid #dddddd;}#cssmenuFjQR ul ul li.has-sub:hover > a::after {border-color: #ffffff;}@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {#cssmenuFjQR {width: 100%;}#cssmenuFjQR ul {width: 100%;display: none;}#cssmenuFjQR.align-center > ul,#cssmenuFjQR.align-right ul ul {text-align: left;}#cssmenuFjQR ul li,#cssmenuFjQR ul ul li,#cssmenuFjQR ul li:hover > ul > li {width: 100%;height: auto;border-top: 1px solid rgba(120, 120, 120, 0.15);}#cssmenuFjQR ul li a,#cssmenuFjQR ul ul li a {width: 100%;}#cssmenuFjQR > ul > li,#cssmenuFjQR.align-center > ul > li,#cssmenuFjQR.align-right > ul > li {float: none;display: block;}#cssmenuFjQR ul ul li a {padding: 20px 20px 20px 30px;font-size: 12px;color: #000000;background: none;}#cssmenuFjQR ul ul li:hover > a,#cssmenuFjQR ul ul li a:hover {color: #000000;}#cssmenuFjQR ul ul ul li a {padding-left: 40px;}#cssmenuFjQR ul ul,#cssmenuFjQR ul ul ul {position: relative;left: 0;right: auto;width: 100%;margin: 0;}#cssmenuFjQR > ul > li.has-sub > a::after,#cssmenuFjQR ul ul li.has-sub > a::after {display: none;}#menu-line {display: none;}#cssmenuFjQR #menu-button {display: block;padding: 20px;color: #000000;cursor: pointer;font-size: 12px;text-transform: uppercase;}#cssmenuFjQR #menu-button::after {content: '';position: absolute;top: 20px;right: 20px;display: block;width: 15px;height: 2px;background: #000000;}#cssmenuFjQR #menu-button::before {content: '';position: absolute;top: 25px;right: 20px;display: block;width: 15px;height: 3px;border-top: 2px solid #000000;border-bottom: 2px solid #000000;}#cssmenuFjQR .submenu-button {position: absolute;z-index: 10;right: 0;top: 0;display: block;border-left: 1px solid rgba(120, 120, 120, 0.15);height: 52px;width: 52px;cursor: pointer;}#cssmenuFjQR .submenu-button::after {content: '';position: absolute;top: 21px;left: 26px;display: block;width: 1px;height: 11px;background: #000000;z-index: 99;}#cssmenuFjQR .submenu-button::before {content: '';position: absolute;left: 21px;top: 26px;display: block;width: 11px;height: 1px;background: #000000;z-index: 99;}#cssmenuFjQR .submenu-button.submenu-opened:after {display: none;}}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">(function($) { $.fn.menumaker = function(options) { var cssmenuFjQR = $(this), settings = $.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenuFjQR.prepend('<div id="menu-button">' + settings.title + '</div>'); $(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); } else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenuFjQR.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenuFjQR.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenuFjQR.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenuFjQR.addClass('dropdown'); if (settings.sticky === true) cssmenuFjQR.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenuFjQR.find('ul').show(); } if ($(window).width() <= 768) { cssmenuFjQR.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $(document).ready(function() { $("#cssmenuFjQR").menumaker({ title: "Menu", format: "multitoggle" }); $("#cssmenuFjQR").prepend("<div id='menu-line'></div>"); var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenuFjQR #menu-line"), lineWidth, defaultPosition, defaultWidth; $("#cssmenuFjQR > ul > li").each(function() { if ($(this).hasClass('active')) { activeElement = $(this); foundActive = true; } }); if (foundActive === false) { activeElement = $("#cssmenuFjQR > ul > li").first(); } defaultWidth = lineWidth = activeElement.width(); defaultPosition = linePosition = activeElement.position().left; menuLine.css("width", lineWidth); menuLine.css("left", linePosition); $("#cssmenuFjQR > ul > li").hover(function() { activeElement = $(this); lineWidth = activeElement.width(); linePosition = activeElement.position().left; menuLine.css("width", lineWidth); menuLine.css("left", linePosition); }, function() { menuLine.css("left", defaultPosition); menuLine.css("width", defaultWidth); }); }); }); })(jQuery); </script> <div id='cssmenuFjQR'><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 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>

Responsive Flat DropDown Menu
 

Preview

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

[Show Code][Hide Code]
<style>@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);#cssmenuRFM,#cssmenuRFM ul,#cssmenuRFM ul li,#cssmenuRFM ul li a,#cssmenuRFM #menu-button {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;}#cssmenuRFM:after,#cssmenuRFM > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#cssmenuRFM #menu-button {display: none;}#cssmenuRFM {font-family: Montserrat, sans-serif;background: #333333;}#cssmenuRFM > ul > li {float: left;}#cssmenuRFM.align-center > ul {font-size: 0;text-align: center;}#cssmenuRFM.align-center > ul > li {display: inline-block;float: none;}#cssmenuRFM.align-center ul ul {text-align: left;}#cssmenuRFM.align-right > ul > li {float: right;}#cssmenuRFM > ul > li > a {padding: 17px;font-size: 12px;letter-spacing: 1px;text-decoration: none;color: #dddddd;font-weight: 700;text-transform: uppercase;}#cssmenuRFM > ul > li:hover > a {color: #ffffff;}#cssmenuRFM > ul > li.has-sub > a {padding-right: 30px;}#cssmenuRFM > ul > li.has-sub > a:after {position: absolute;top: 22px;right: 11px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}#cssmenuRFM > ul > li.has-sub > a:before {position: absolute;top: 19px;right: 14px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}#cssmenuRFM > ul > li.has-sub:hover > a:before {top: 23px;height: 0;}#cssmenuRFM ul ul {position: absolute;left: -9999px;}#cssmenuRFM.align-right ul ul {text-align: right;}#cssmenuRFM ul ul li {height: 0;-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}#cssmenuRFM li:hover > ul {left: auto;}#cssmenuRFM.align-right li:hover > ul {left: auto;right: 0;}#cssmenuRFM li:hover > ul > li {height: 35px;}#cssmenuRFM ul ul ul {margin-left: 100%;top: 0;}#cssmenuRFM.align-right ul ul ul {margin-left: 0;margin-right: 100%;}#cssmenuRFM ul ul li a {border-bottom: 1px solid rgba(150, 150, 150, 0.15);padding: 11px 15px;width: 170px;font-size: 12px;text-decoration: none;color: #dddddd;font-weight: 400;background: #333333;}#cssmenuRFM ul ul li:last-child > a,#cssmenuRFM ul ul li.last-item > a {border-bottom: 0;}#cssmenuRFM ul ul li:hover > a,#cssmenuRFM ul ul li a:hover {color: #ffffff;}#cssmenuRFM ul ul li.has-sub > a:after {position: absolute;top: 16px;right: 11px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}#cssmenuRFM.align-right ul ul li.has-sub > a:after {right: auto;left: 11px;}#cssmenuRFM ul ul li.has-sub > a:before {position: absolute;top: 13px;right: 14px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';-webkit-transition: all .25s ease;-moz-transition: all .25s ease;-ms-transition: all .25s ease;-o-transition: all .25s ease;transition: all .25s ease;}#cssmenuRFM.align-right ul ul li.has-sub > a:before {right: auto;left: 14px;}#cssmenuRFM ul ul > li.has-sub:hover > a:before {top: 17px;height: 0;}@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {#cssmenuRFM {width: 100%;}#cssmenuRFM ul {width: 100%;display: none;}#cssmenuRFM.align-center > ul {text-align: left;}#cssmenuRFM ul li {width: 100%;border-top: 1px solid rgba(120, 120, 120, 0.2);}#cssmenuRFM ul ul li,#cssmenuRFM li:hover > ul > li {height: auto;}#cssmenuRFM ul li a,#cssmenuRFM ul ul li a {width: 100%;border-bottom: 0;}#cssmenuRFM > ul > li {float: none;}#cssmenuRFM ul ul li a {padding-left: 25px;}#cssmenuRFM ul ul ul li a {padding-left: 35px;}#cssmenuRFM ul ul li a {color: #dddddd;background: none;}#cssmenuRFM ul ul li:hover > a,#cssmenuRFM ul ul li.active > a {color: #ffffff;}#cssmenuRFM ul ul,#cssmenuRFM ul ul ul,#cssmenuRFM.align-right ul ul {position: relative;left: 0;width: 100%;margin: 0;text-align: left;}#cssmenuRFM > ul > li.has-sub > a:after,#cssmenuRFM > ul > li.has-sub > a:before,#cssmenuRFM ul ul > li.has-sub > a:after,#cssmenuRFM ul ul > li.has-sub > a:before {display: none;}#cssmenuRFM #menu-button {display: block;padding: 17px;color: #dddddd;cursor: pointer;font-size: 12px;text-transform: uppercase;font-weight: 700;}#cssmenuRFM #menu-button:after {position: absolute;top: 22px;right: 17px;display: block;height: 4px;width: 20px;border-top: 2px solid #dddddd;border-bottom: 2px solid #dddddd;content: '';}#cssmenuRFM #menu-button:before {position: absolute;top: 16px;right: 17px;display: block;height: 2px;width: 20px;background: #dddddd;content: '';}#cssmenuRFM #menu-button.menu-opened:after {top: 23px;border: 0;height: 2px;width: 15px;background: #ffffff;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}#cssmenuRFM #menu-button.menu-opened:before {top: 23px;background: #ffffff;width: 15px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}#cssmenuRFM .submenu-button {position: absolute;z-index: 99;right: 0;top: 0;display: block;border-left: 1px solid rgba(120, 120, 120, 0.2);height: 46px;width: 46px;cursor: pointer;}#cssmenuRFM .submenu-button.submenu-opened {background: #262626;}#cssmenuRFM ul ul .submenu-button {height: 34px;width: 34px;}#cssmenuRFM .submenu-button:after {position: absolute;top: 22px;right: 19px;width: 8px;height: 2px;display: block;background: #dddddd;content: '';}#cssmenuRFM ul ul .submenu-button:after {top: 15px;right: 13px;}#cssmenuRFM .submenu-button.submenu-opened:after {background: #ffffff;}#cssmenuRFM .submenu-button:before {position: absolute;top: 19px;right: 22px;display: block;width: 2px;height: 8px;background: #dddddd;content: '';}#cssmenuRFM ul ul .submenu-button:before {top: 12px;right: 16px;}#cssmenuRFM .submenu-button.submenu-opened:before {display: none;}}</style> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type="text/javascript">(function($) { $.fn.menumaker = function(options) { var cssmenuRFM = $(this), settings = $.extend({ title: "Menu", format: "dropdown", sticky: false }, options); return this.each(function() { cssmenuRFM.prepend('<div id="menu-button">' + settings.title + '</div>'); $(this).find("#menu-button").on('click', function(){ $(this).toggleClass('menu-opened'); var mainmenu = $(this).next('ul'); if (mainmenu.hasClass('open')) { mainmenu.hide().removeClass('open'); } else { mainmenu.show().addClass('open'); if (settings.format === "dropdown") { mainmenu.find('ul').show(); } } }); cssmenuRFM.find('li ul').parent().addClass('has-sub'); multiTg = function() { cssmenuRFM.find(".has-sub").prepend('<span class="submenu-button"></span>'); cssmenuRFM.find('.submenu-button').on('click', function() { $(this).toggleClass('submenu-opened'); if ($(this).siblings('ul').hasClass('open')) { $(this).siblings('ul').removeClass('open').hide(); } else { $(this).siblings('ul').addClass('open').show(); } }); }; if (settings.format === 'multitoggle') multiTg(); else cssmenuRFM.addClass('dropdown'); if (settings.sticky === true) cssmenuRFM.css('position', 'fixed'); resizeFix = function() { if ($( window ).width() > 768) { cssmenuRFM.find('ul').show(); } if ($(window).width() <= 768) { cssmenuRFM.find('ul').hide().removeClass('open'); } }; resizeFix(); return $(window).on('resize', resizeFix); }); }; })(jQuery); (function($){ $(document).ready(function(){ $("#cssmenuRFM").menumaker({ title: "Menu", format: "multitoggle" }); }); })(jQuery);</script> <div id='cssmenuRFM'><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 class='has-sub'><a href='#'><span>Gasendra</span></a> <ul><li><a href='#'><span>Gasendra1</span></a></li><li class='last'><a href='#'><span>Gasendra2</span></a></li></ul></li><li class='last'><a href='#'><span>Contact</span></a></li></ul></div>

Tutorial How to Add Drop Down Menu

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