We decided to create a simple unique CSS3 menu for free download. The menu has drop down support also but, it is disabled ( Commented Out ). You can remove comments in order the drop down menu to work. This is the code bellow :D…

HTML

From line 11 to 20 and from 43 to 52, you see the code is commented, that is for the drop down support.

<ul>
<li>
<a href="#">
<div class="cv-square icon-home"></div>
<div class="cv-content">
<div class="cv-main">HOME</div>
<div class="cv-sub">Go Back Home</div>
</div><!-- Content-->
</a>

<!--<ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a>
           <ul>
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
         </li>
       </ul>-->

</li>

<li>
<a href="#">
<div class="cv-square icon-tint"></div>
<div class="cv-content">
<div class="cv-main">BLOG</div>
<div class="cv-sub">See Whats New</div>
</div><!-- Content-->
</a>
</li>

<li>
<a href="#">
<div class="cv-square icon-camera"></div>
<div class="cv-content">
<div class="cv-main">PORTFOLIO</div>
<div class="cv-sub">What We've Done So Far</div>
</div><!-- Content-->
</a>

<!--<ul>
         <li><a href="#">Photoshop</a></li>
         <li><a href="#">Illustrator</a></li>
         <li><a href="#">Web Design</a>
           <ul>
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
         </li>
       </ul>-->

</li>

<li>
<a href="#">
<div class="cv-square icon-envelope"></div>
<div class="cv-content">
<div class="cv-main">CONTACT</div>
<div class="cv-sub">Get In Touch</div>
</div><!-- Content-->
</a>
</li>
</ul>

CSS3

You see bellow that, from line 137 the CSS is commented, thats for the drop down support mentioned above.

ul {
	max-width:960px; /* Adjust Width To Your Needs - Default: 960 pixels */
	list-style:none;
    position: relative; /* For The Drop Down */
    display: inline-table; /* For The Drop Down */
}

ul li {
	float:left;
}

ul li a {
	display:block;
	width:100%;
	height:100%;
	text-decoration:none;
}

ul li a:hover {
	display:block;
	width:100%;
	height:100%;
	opacity:0.5;
}

ul li .cv-square {
	width:59px;
	height:44px;
	padding:15px 0px 0px 0px;
	float:left;
	font-size:26px;
	text-align:center;
	background:#1abc9c; /* Squares Background Color */
	color:#FFF;         /* Squares Icon Color */
	
	-webkit-animation-name: bounceInRight; 
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
	
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both; 
}

ul li .cv-content {
	height:52px;
	float:left;
	margin:0px 10px 0px 0px;
	padding:7px 25px 0px 10px;
	background:#FFF;
	
    -webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
    -o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
	animation-fill-mode: both;
}

ul li .cv-content .cv-main {
	font-family:"BebasNeueRegular";
	font-size:23px;                  /* Main Menu Text Size */
	color:#34495e;                   /* Main Menu Text Color */
	
	-webkit-animation-name: bounceInTop;
	-moz-animation-name: bounceInTop;
	-o-animation-name: bounceInTop;
	animation-name: bounceInTop;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
    -o-animation-duration: 1s;
	animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
	animation-fill-mode: both;
}

ul li .cv-content .cv-sub {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;                            /* Main Menu Sub Text Size */
	color:#2980b9;                             /* Main Menu Sub Text Color */
	
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	
	-webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
	
    -webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
    animation-duration: 1s;
	
	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

/************************************************************************* Drop Down First Level Style - Remove comments to this style bellow for drop down to work, you also need to remove 
                                                                           html comments in the index.html file, contact me at novakin@yahoo.com if you dont know how.  */
/*ul:after {
    content: "";
    clear: both;
    display: block;
}

ul ul {
    display: none;
	margin:0px 0px 0px -5px;
	padding:0;
	position: absolute;
    top: 100%;}

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

ul ul a {
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    padding: 23px 50px 23px 25px;
    background: #1abc9c;
}

ul ul a:hover {
    color:#FFF;               
    background: #34495e;          
	opacity:1.0;                  
}

ul:after {
    content: "";
    clear: both;
    display: block;
}

ul ul li {
	float:none;
	position:relative;
}

ul ul li a {
    color: #fff;
    /*min-width: 100px;
}

ul ul li a:hover {
    background: #4b545f;
    padding: 23px 50px 23px 25px;
}

/********************************************************************************* Drop Down Third Level Style */
/*ul ul ul {
    position: absolute;
    left: 149.5%;
    top: 0;
    min-width: 100px;
}*/

DEMO DOWNLOAD MENU