Home » Css » Tips Blog » Menu Animated Dropdow

Sabtu, 14 Juli 2012

Menu Animated Dropdow

halo sobat mari kita baca di halaman ini bersama-sama kali ini mas widodo akan memberikan ilmu blog lagi yaitu cara membuat menu Animated  Dropdown, Sebuah Menu Dropdown memungkinkan pengguna untuk mengetahui agar pengunjung  dapat mencari sebuah category yanga ada di blog . dan  menu Droupdown ini menggunakan css untuk selengkapnya bisa liat di bawah ini screenshotnya....?





HTML
<ul id="menu">
 <li><a href="#">Home</a></li>
 <li>
  <a href="#">Categories</a>
  <ul>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Graphic design</a></li>
   <li><a href="#">Development tools</a></li>
   <li><a href="#">Web design</a></li>
  </ul>
 </li>
 <li><a href="#">Work</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>

CSS
#menu, #menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
 }
 
 #menu {
  width: 960px;
  margin: 60px auto;
  border: 1px solid #222;
  background-color: #111;
  background-image: -moz-linear-gradient(#444, #111); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111)); 
  background-image: -webkit-linear-gradient(#444, #111); 
  background-image: -o-linear-gradient(#444, #111);
  background-image: -ms-linear-gradient(#444, #111);
  background-image: linear-gradient(#444, #111);
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
 }
 
 #menu:before,
 #menu:after {
  content: "";
  display: table;
 }
 
 #menu:after {
  clear: both;
 }
 
 #menu {
  zoom:1;
 }
 
 #menu li {
  float: left;
  border-right: 1px solid #222;
  -moz-box-shadow: 1px 0 0 #444;
  -webkit-box-shadow: 1px 0 0 #444;
  box-shadow: 1px 0 0 #444;
  position: relative;
 }
 
 #menu a {
  float: left;
  padding: 12px 30px;
  color: #999;
  text-transform: uppercase;
  font: bold 12px Arial, Helvetica;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
 }
 
 #menu li:hover > a {
  color: #fafafa;
 }
 
 *html #menu li a:hover { /* IE6 only */
  color: #fafafa;
 }
 
 #menu ul {
  margin: 20px 0 0 0;
  _margin: 0; /*IE6 only*/
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 1;    
  background: #444;
  background: -moz-linear-gradient(#444, #111);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  background: -webkit-linear-gradient(#444, #111);    
  background: -o-linear-gradient(#444, #111); 
  background: -ms-linear-gradient(#444, #111); 
  background: linear-gradient(#444, #111);
  -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
  -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
  box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;  
 }

 #menu li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
 }
 
 #menu ul ul {
  top: 0;
  left: 150px;
  margin: 0 0 0 20px;
  _margin: 0; /*IE6 only*/
  -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
  -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
  box-shadow: -1px 0 0 rgba(255,255,255,.3);  
 }
 
 #menu ul li {
  float: none;
  display: block;
  border: 0;
  _line-height: 0; /*IE6 only*/
  -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
  box-shadow: 0 1px 0 #111, 0 2px 0 #666;
 }
 
 #menu ul li:last-child {   
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;    
 }
 
 #menu ul a {    
  padding: 10px;
  width: 130px;
  _height: 10px; /*IE6 only*/
  display: block;
  white-space: nowrap;
  float: none;
  text-transform: none;
 }
 
 #menu ul a:hover {
  background-color: #0186ba;
  background-image: -moz-linear-gradient(#04acec,  #0186ba); 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
  background-image: -webkit-linear-gradient(#04acec, #0186ba);
  background-image: -o-linear-gradient(#04acec, #0186ba);
  background-image: -ms-linear-gradient(#04acec, #0186ba);
  background-image: linear-gradient(#04acec, #0186ba);
 }
 
 #menu ul li:first-child > a {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
 }
 
 #menu ul li:first-child > a:after {
  content: '';
  position: absolute;
  left: 40px;
  top: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #444;
 }
 
 #menu ul ul li:first-child a:after {
  left: -6px;
  top: 50%;
  margin-top: -6px;
  border-left: 0; 
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-right: 6px solid #3b3b3b;
 }
 
 #menu ul li:first-child a:hover:after {
  border-bottom-color: #04acec; 
 }
 
 #menu ul ul li:first-child a:hover:after {
  border-right-color: #0299d3; 
  border-bottom-color: transparent;  
 }
 
 #menu ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
 }
 
 /* Mobile */
 #menu-trigger {
  display: none;
 }

 @media screen and (max-width: 600px) {

  /* nav-wrap */
  #menu-wrap {
   position: relative;
  }

  #menu-wrap * {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
  }

  /* menu icon */
  #menu-trigger {
   display: block; /* show menu icon */
   height: 40px;
   line-height: 40px;
   cursor: pointer;  
   padding: 0 0 0 35px;
   border: 1px solid #222;
   color: #fafafa;
   font-weight: bold;
   background-color: #111;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111); 
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111); 
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
   -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
   -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
   box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
  }
  
  /* main nav */
  #menu {
   margin: 0; padding: 10px;
   position: absolute;
   top: 40px;
   width: 100%;
   z-index: 1;
   background-color: #444;
   display: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;  
  }

  #menu:after {
   content: '';
   position: absolute;
   left: 25px;
   top: -8px;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   border-bottom: 8px solid #444;
  } 

  #menu ul {
   position: static;
   visibility: visible;
   opacity: 1;
   margin: 0;
   background: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;    
  }

  #menu ul ul {
   margin: 0 0 0 20px !important;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;  
  }

  #menu li {
   position: static;
   display: block;
   float: none;
   border: 0;
   margin: 5px;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;   
  }

  #menu ul li{
   margin-left: 20px;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;  
  }

  #menu a{
   display: block;
   float: none;
   padding: 0;
   color: #999;
  }

  #menu a:hover{
   color: #fafafa;
  } 

  #menu ul a{
   padding: 0;
   width: auto;  
  }

  #menu ul a:hover{
   background: none; 
  }

  #menu ul li:first-child a:after,
  #menu ul ul li:first-child a:after {
   border: 0;
  }  

 }

 @media screen and (min-width: 600px) {
  #menu {
   display: block !important;
  }
 } 

 /* iPad */
 .no-transition {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  opacity: 1;
  visibility: visible;
  display: none;    
 }

 #menu li:hover > .no-transition {
  display: block;
 }


Sekian Dari saya
Selamat Mencoba....?

Terkait

Description: Menu Animated Dropdow Rating: 4.5 Reviewer: Widodo ItemReviewed: Menu Animated Dropdow
Al
Mbah Qopet Updated at: 19.49
Posted by

23 comments:

  1. affanibnu14 Juli 2012 pukul 23.51

    menggunakan javarsrirpt ya..?

    BalasHapus
  2. Widodo15 Juli 2012 pukul 05.21

    @affanibnu ini pake css semua sob no squery

    BalasHapus
  3. Widodo15 Juli 2012 pukul 05.21

    @EGGI IMCYBER tanks

    BalasHapus
  4. adha reyan15 Juli 2012 pukul 11.59

    nice sharing masbro..
    templatex jg kren..

    BalasHapus
  5. Widodo15 Juli 2012 pukul 20.23

    @Muhammad Reyan Dirul Adha makasih sob

    BalasHapus
  6. alul stemaku15 Juli 2012 pukul 22.43

    keren sob menunya...

    BalasHapus
  7. Rahmatullah15 Juli 2012 pukul 23.34

    Menu sperti itu sdah lama saya carri sob..
    Hheheeehee

    BalasHapus
  8. Unknown16 Juli 2012 pukul 02.48

    wahhh asyik nih cssnya...
    ini langsung di edit template gak pake java script di tata letak

    BalasHapus
  9. Widodo16 Juli 2012 pukul 07.23

    @Alul | al-ste | makasih sob

    BalasHapus
  10. Widodo16 Juli 2012 pukul 07.27

    @Rahmatullah ohh bearti pass ya dapet disini he XD

    BalasHapus
  11. Widodo16 Juli 2012 pukul 07.27

    @Darmawan Saputra Tanks

    BalasHapus
  12. Widodo16 Juli 2012 pukul 07.28

    @Bang Dayat gak sob langsung di htmlnya
    tapi kalo mau di buat javascrip tata letaknya juga bisa sih sob

    BalasHapus
  13. Anonim18 Juli 2012 pukul 05.17

    wah keren juga nih


    kapan kapan saya pake n ganti warnanya jadi biru hitam hehehe thanks udah berkunjung ke blog ane gan

    www@abdisr@blogspot@com

    BalasHapus
  14. Unknown2 Agustus 2012 pukul 06.15

    wahhh ini yang saya cari sobat,, saya ambil cssnya aja yah :))

    BalasHapus
  15. Unknown6 Agustus 2012 pukul 03.13

    @Anonim ya gan makasih juga udah kesini

    BalasHapus
  16. Unknown6 Agustus 2012 pukul 03.13

    @Bang Dayat sippp

    BalasHapus
  17. Bayu Handono7 September 2012 pukul 09.32

    mantapp :)

    BalasHapus
  18. The 7Bloggers5 Oktober 2012 pukul 00.03

    hehehehe menu drop downya kayaknya bguus mas......

    BalasHapus
  19. Blog Becik8 November 2012 pukul 16.05

    Keren sob :)

    BalasHapus
  20. Rengga-tikus.blogspot.com15 Februari 2013 pukul 18.43

    Nice post gan

    BalasHapus
  21. Arra Pena17 Februari 2013 pukul 02.49

    Oke deh, terima kasih.

    BalasHapus
  22. Unknown12 Oktober 2013 pukul 06.33

    ijin savr scrif nya

    BalasHapus
  23. obat herbal penyakit1 Desember 2013 pukul 22.52

    sip deh

    BalasHapus

Berkomentarlah dengan sopan dan Baik
Satu Komentar Anda Membangun guna Blog ini

Langganan: Posting Komentar (Atom)