Home » Blogger , Gadget » Free Vertical Drop Down Menu for Blogger Page 1

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/

0 komentar:

Posting Komentar