Home > Tips

CSS3 Drop-down Menu - Free Download the Exceptional CSS3 Drop-down Menu



 CSS3 Drop-down Menu - Free Download CSS3 Drop-down Menu

 

   

 

Are you still confused by how to create CSS3 drop-down menu? If you say yes, please continue reading this article. In this article, I¨d like share some of my experiences of creating CSS3 drop-down menu.

The above CSS3 drop-down menu is one of my recent works. You can free download it and then edit it for your own use.



 Brief Introduction to the CSS3 Drop-down Menu

The above CSS3 drop-down menu is created by only using CSS3. When your mouse hovers over one of the toolbar - , the drop-down menu will appear. The toolbar¨s icons are created by @font-face. And, I used CSS3 gradient to create the different gradient colors for each drop-down menu. The hiding and revealing effects of the drop-down menu are not created through traditional ways but through controlling the height of the drop-down menu. When the page is being preloaded (Click the ^Demo ̄ button above to view the CSS3 Drop-down Menu sample page), the height of the CSS3 drop-down menu is 0 pixel. However, when your mouse hovers over one of the toolbar icons, the height will become 180 pixels.

The below passage will show you the related HTML codes and CSS codes for the CSS3 Drop-down menu, I hope it will give you some inspiration on how to create CSS3 drop-down menu.



 HTML Codes for the above CSS3 Drop-down Menu

 <ul>
  <li>
    <a href='#' class='icon-user'></a>
    <div>
      <ul>
        <li><a href='#'>messages</a></li>
        <li><a href='#'>friends</a></li>
        <li><a href='#'>comments</a></li>
        <li><a href='#'>logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href='#' class='icon-clock'></a>
    <div>
      <ul>
        <li><a href='#'>messages</a></li>
        <li><a href='#'>friends</a></li>
        <li><a href='#'>comments</a></li>
        <li><a href='#'>logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href='#' class='icon-setup'></a>
    <div>
      <ul>
        <li><a href='#'>messages</a></li>
        <li><a href='#'>friends</a></li>
        <li><a href='#'>comments</a></li>
        <li><a href='#'>logout</a></li>
      </ul>
    </div>
  </li>
</ul>



 CSS Codes for the above CSS3 Drop-down Menu

 

body {
 background-color: #323232;
}
.demo {
 width: 180px;
 margin: 40px auto 0;
}
.demo > ul > li {
 float: left;
 width: 60px;
 text-align: center;
 position: relative;
}
.demo > ul > li a {
 display: block;
 color: #fff;
}
.demo > ul > li a:after {
 display: inline-block;
 font-family: 'icomoon';
 font-style: normal;
 speak: none;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 font-size: 30px;
 color: #a1a1a1;
}
.demo > ul > li:nth-child(1) > a:after {
 content: '\2c';
}
.demo > ul > li:nth-child(2) > a:after {
 content: '\21';
}
.demo > ul > li:nth-child(3) > a:after {
 content: '\2f';
}
.demo > ul > li div {
 position: relative;
 margin-left: -40px;
 width: 180px;
 height: 0px;
 overflow: hidden;
 -webkit-transition: height 0.4s linear;
 -moz-transition: height 0.4s linear;
 -o-transition: height 0.4s linear;
  -ms-transition: height 0.4s linear;
 transition: height 0.4s linear;
}
.demo > ul > li:hover div {
 height: 180px;
 z-index: 2;
}
.demo > ul > li ul {
 position: absolute;
 margin-top: 10px;
 font-size: 16px;
 text-shadow: 0 1px 1px rgba(0,0,0,.4);
 text-align: left;
 width: 140px;
 line-height: 30px;
 padding: 10px 0;
 border-radius: 3px;
}
.demo > ul > li:nth-child(1) ul {
 box-shadow: 0 1px 0 #db7777 inset,0 0 1px #c70000;
 background: -webkit-linear-gradient(top,#d80000 10%,#8b0000);
 background: -moz-linear-gradient(top,#d80000 10%,#8b0000);
  background: -o-linear-gradient(top,#d80000 10%,#8b0000);
  background: -ms-linear-gradient(top,#d80000 10%,#8b0000);
 background: linear-gradient(top,#d80000 10%,#8b0000);
}
.demo > ul > li:nth-child(2) ul {
  box-shadow: 0 1px 0 #85ff7c inset,0 0 1px #4bd940 inset;
  background: -webkit-linear-gradient(top,#31db17 10%,#0b9200);
  background: -moz-linear-gradient(top,#31db17 10%,#0b9200);
  background: -o-linear-gradient(top,#31db17 10%,#0b9200);
  background: -ms-linear-gradient(top,#31db17 10%,#0b9200);
  background: linear-gradient(top,#31db17 10%,#0b9200);
}
.demo > ul > li:nth-child(3) ul {
  box-shadow: 0 1px 0 #77d4da inset,0 0 1px #0077b0 inset;
  background: -webkit-linear-gradient(top,#00c3db 10%,#005e91);
  background: -moz-linear-gradient(top,#00c3db 10%,#005e91);
  background: -ms-linear-gradient(top,#00c3db 10%,#005e91);
  background: -o-linear-gradient(top,#00c3db 10%,#005e91);
  background: linear-gradient(top,#00c3db 10%,#005e91);

}
.demo > ul > li ul li a {
  position: relative;
  padding: 0 20px;
}
.demo > ul > li:nth-child(1) ul li a:hover {
  text-decoration: none;
  background-color: #800000;
}
.demo > ul > li:nth-child(2) ul li a:hover {
  text-decoration: none;
  background-color: #0a6602;
}
.demo > ul > li:nth-child(3) ul li a:hover {
  text-decoration: none;
  background-color: #0a5278;
}
.demo > ul > li:nth-child(1) ul li a {
  border-bottom: 1px solid #d33030;
}
.demo > ul > li:nth-child(2) ul li a {
  border-bottom: 1px solid #60dd57;
}
.demo > ul > li:nth-child(3) ul li a {
  border-bottom: 1px solid #30bcd6;
}
.demo > ul > li ul li:first-child a:first-child:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 1px;
  border: 5px solid transparent;
  left: 50%;
  top: -20px;
  margin-left: -5px;
  z-index: 99;
}
.demo > ul > li:nth-child(1) ul li a:first-child:before {
  border-bottom-color: #d80000;
}
.demo > ul > li:nth-child(2) ul li a:first-child:before {
  border-bottom-color: #25ec17;
}
.demo > ul > li:nth-child(3) ul li a:first-child:before {
  border-bottom-color: #00c3db;
}
 
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot');
 src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('fonts/icomoon.svg#icomoon') format('svg'),
  url('fonts/icomoon.woff') format('woff'),
  url('fonts/icomoon.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}



 Contact Me for Help

I am Daniel, one of the programmers of SliceMaker Soft. If you have problems understanding the above CSS3 drop-down menu or if you have some suggestions, please send me an email at: contact@slicemaker.com. I will try my best to serve you.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0