mbah djojo code
Menu Vertical Drop Down Dengan CSS
Code
<style type="text/css"> * { margin: 0px; padding: 0px; } nav { font-family: Helvetica, Arial, sans-serif; line-height: 1.5; margin: 50px auto; /*for display only*/ width: 300px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); box-shadow: 2px 2px 5px rgba(0,0,0,0.2); } .menu-item { background: #fff; width: 300px; } /*Menu Header Styles 1*/ .menu-item h4 { color: #fff; font-size: 15px; font-weight: 500; padding: 7px 12px; background: #9DB6D7; } .menu-item h4 a { color: white; display: block; text-decoration: none; width: 300px; } /*Menu Header Styles 2*/ .menu-item h4 { border-bottom: 1px solid rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 15px; font-weight: 500; padding: 7px 12px; background: #a90329; /* Old browsers */ background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */ background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ } .menu-item h4:hover { background: #cc002c; /* Old browsers */ background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */ background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ } .alpha p { font-size: 13px; padding: 8px 12px; color: #aaa; } /*ul Styles*/ .menu-item ul { background: #fff; font-size: 13px; line-height: 30px; list-style-type: none; overflow: hidden; padding: 0px; } .menu-item ul a { margin-left: 20px; text-decoration: none; color: #0A0A0A; display: block; width: 250px; } /*li Styles*/ .menu-item li { border-bottom: 1px solid #eee; } .menu-item li:hover { background: #eee; } /*ul Styles*/ .menu-item ul { background: #B2D8E0; font-size: 13px; line-height: 30px; height: 0px; /*Collapses the menu*/ list-style-type: none; overflow: hidden; padding: 0px; } /*ul Styles*/ .menu-item ul { background: #fff; font-size: 13px; line-height: 30px; height: 0px; list-style-type: none; overflow: hidden; padding: 0px; /*Animation*/ -webkit-transition: height 1s ease; -moz-transition: height 1s ease; -o-transition: height 1s ease; -ms-transition: height 1s ease; transition: height 1s ease; } .menu-item:hover ul { height: auto; } </style> <nav> <div class="menu-item"> <h4><a href="#">Menu 1</a></h4> <ul> <li><a href="#">Sub Menu 1.1</a></li> <li><a href="#">Sub Menu 1.2</a></li> <li><a href="#">Sub Menu 1.3</a></li> <li><a href="#">Sub Menu 1.4</a></li> <li><a href="#">Sub Menu 1.5</a></li> </ul> </div> <div class="menu-item"> <h4><a href="#">Menu 2</a></h4> <ul> <li><a href="#">Sub Menu 2.1</a></li> <li><a href="#">Sub Menu 2.2</a></li> <li><a href="#">Sub Menu 2.3</a></li> <li><a href="#">Sub Menu 2.4</a></li> <li><a href="#">Sub Menu 2.5</a></li> </ul> </div> <div class="menu-item"> <h4><a href="#">Menu 3</a></h4> <ul> <li><a href="#">Sub Menu 3.1</a></li> <li><a href="#">Sub Menu 3.2</a></li> <li><a href="#">Sub Menu 3.3</a></li> <li><a href="#">Sub Menu 3.4</a></li> <li><a href="#">Sub Menu 3.5</a></li> </ul> </div> </nav>