Css3 DropDown Menu

Many times it has been seen that we are in need of using a dropdown menu for our users. Unfortunately for amazing effect and stylish design, either we use the javascript or jquery. Somehow now we can create the most stylish dropdown menu with css3 also.

In this example I have demonstrated the pure css3 way of designing a dropdown menu. If an individual has the knowledge of CSS3, he/she can get it easily.

The whole process will not take more than five minutes. Please go through the tutorial, which will teach you the complete process.

Download This Script

Mouse hover on the menu to see it in action.

Here is the complete two step process

1) Create an HTML file like this:

<!DOCTYPE html>
<html>
 <head>
  <title>CSS3 dropdown menu</title>
 </head>
 <body>
  <ul id="menu">
   <li><a href="#1">Menu1</a></li>
   <li><a href="#">Menu2</a>
    <ul>
     <li><a href="#">Sub Menu1</a>
      <ul>
       <li><a href="#">Sub Sub Menu1</a></li>
       <li><a href="#">Sub Sub Menu2</a></li>
       <li><a href="#">Sub Sub Menu3</a></li>
       <li><a href="#">Sub Sub Menu4</a></li>
      </ul>				
     </li>
     <li><a href="#">Sub Menu2</a>
      <ul>
       <li><a href="#">Sub Sub Menu1</a></li>
       <li><a href="#">Sub Sub Menu2</a></li>
       <li><a href="#">Sub Sub Menu3</a></li>
       <li><a href="#">Sub Sub Menu4</a></li>
      </ul>				
     </li>
     <li><a href="#">Sub Menu3</a>
      <ul>
       <li><a href="#">Sub Sub Menu1</a></li>
       <li><a href="#">Sub Sub Menu2</a></li>
       <li><a href="#">Sub Sub Menu3</a></li>
       <li><a href="#">Sub Sub Menu4</a></li>
      </ul>				
     </li>
     <li><a href="#">Sub Menu4</a>				
      <ul>
       <li><a href="#">Sub Sub Menu1</a></li>
       <li><a href="#">Sub Sub Menu2</a></li>
       <li><a href="#">Sub Sub Menu3</a></li>
       <li><a href="#">Sub Sub Menu4</a></li>
      </ul>	
     </li>
    </ul>
   </li>
   <li><a href="#">Menu3</a>
    <ul>
     <li><a href="#">Sub Menu1</a>
      <ul>
       <li><a href="#">Sub Sub Menu1</a>		
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu2</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu3</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>
       </li>
      </ul>					
     </li>
     <li><a href="#">Sub Menu2</a>
	  <ul>
       <li><a href="#">Sub Sub Menu1</a>
	    <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu2</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu3</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
      </ul>					
     </li>
     <li><a href="#">Sub Menu3</a>
      <ul>
       <li><a href="#">Sub Sub Menu1</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu2</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
       <li><a href="#">Sub Sub Menu3</a>
        <ul>
         <li><a href="#">Sub Sub Sub Menu1</a></li>
         <li><a href="#">Sub Sub Sub Menu2</a></li>
         <li><a href="#">Sub Sub Sub Menu3</a></li>
        </ul>							
       </li>
      </ul>					
     </li>
    </ul>		
   </li>
   <li><a href="#">Menu4</a></li>
   <li><a href="#">Menu5</a></li>
   <li><a href="#">Menu6</a></li>
   <li><a href="#">Menu7</a></li>
  </ul>
  <p>Mouse hover on the menu to see it in action.</p>
 </body>
</html>

Download


2)Now create a CSS file. This file can contain css3 features also.

#menu
{
	width: 660px;
	margin: auto;
	padding: 10px 0 0 0;
	list-style: none;  
	background: #00C492;
	background: -moz-linear-gradient(#33FF33, #00C492); 
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00C492),color-stop(1, #33FF33));	
	background: -webkit-linear-gradient(#33FF33, #00C492);	
	background: -o-linear-gradient(#33FF33, #00C492);
	background: -ms-linear-gradient(#33FF33, #00C492);
	background: linear-gradient(#33FF33, #00C492);
	-moz-border-radius: 50px;
	border-radius: 50px;
	-moz-box-shadow: 0 2px 1px #9c9c9c;
	-webkit-box-shadow: 0 2px 1px #9c9c9c;
	box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
	float: left;
	padding: 0 0 10px 0;
	position: relative;
	line-height: 0;
}

#menu a 
{
	float: left;
	height: 25px;
	padding: 0 25px;
	color: #fff;
	text-transform: uppercase;
	font: bold 12px/25px Arial, Helvetica;
	text-decoration: none;
}

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

*html #menu li a:hover /* IE6 */
{
	color: #fafafa;
}

#menu li:hover > ul
{
	display: block;
}

/* Sub-menu */

#menu ul
{
	list-style: none;
	margin: 0;
	padding: 0;    
	display: none;
	position: absolute;
	top: 35px;
	left: 0;
	z-index: 99999;
	background: #00C492;
	background: -moz-linear-gradient(#33FF33, #00C492); 
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #00C492),color-stop(1, #33FF33));	
	background: -webkit-linear-gradient(#33FF33, #00C492);	
	background: -o-linear-gradient(#33FF33, #00C492);
	background: -ms-linear-gradient(#33FF33, #00C492);
	background: linear-gradient(#33FF33, #00C492);
	-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
	-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
	box-shadow: 0 0 2px rgba(255,255,255,.5);	
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#menu ul ul
{
	top: 0;
	left: 150px;
}

#menu ul li
{
	float: none;
	margin: 0;
	padding: 0;
	display: block;  
	-moz-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;
	-webkit-box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;
	box-shadow: 0 1px 0 #ffffff, 0 2px 0 #f2f2f2;
}

#menu ul li:last-child
{   
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;    
}

#menu ul a
{    
	padding: 10px;
	height: 10px;
	width: 130px;
	height: auto;
	line-height: 1;
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}

*html #menu ul a /* IE6 */
{    
	height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{    
	height: 10px;
}

#menu ul a:hover
{
	background: #33FF33;
	background: -moz-linear-gradient(#00C492,  #33FF33);	
	background: -webkit-gradient(linear, left top, left bottom, from(#00C492), to(#33FF33));
	background: -webkit-linear-gradient(#00C492,  #33FF33);
	background: -o-linear-gradient(#00C492,  #33FF33);
	background: -ms-linear-gradient(#00C492,  #33FF33);
	background: linear-gradient(#00C492,  #33FF33);
}

#menu ul li:first-child > a
{
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
	content: '';
	position: absolute;
	left: 30px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid #fff;
}

#menu ul ul li:first-child a:after
{
	left: -8px;
	top: 12px;
	width: 0;
	height: 0;
	border-left: 0;	
	border-bottom: 5px solid transparent;
	border-top: 5px solid transparent;
	border-right: 8px solid #fff;
}

#menu ul li:first-child a:hover:after
{
	border-bottom-color: #fff; 
}

#menu ul ul li:first-child a:hover:after
{
	border-right-color: #04acec; 
	border-bottom-color: transparent; 	
}


#menu ul li:last-child > a
{
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after 
{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
p
{
	text-align:center;
	margin-top:200px;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

Download


That’s all about. Now put this css code into the head element of html file or create and external stylesheet and call it within your html file. You can download the css3 dropdown menu also. To download file click anywhere on the download button.



Comments are closed.