Two level menu using CSS3 transitions

We will create a two level menu using CSS3 and will include effects which were earlier only possible with javascript! Step 1 Lets start by making a simple list in HTML.

<div id="cc-menu">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ITEM 1</a></li>
        <li><a href="#">ITEM 2</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    <div class="clear"></div>
</div>

I have wrapped the UL tags in a DIV tag having an ID of cc-menu, we will be soon adding styles to the cc-menu. Step 2 We will now add the basic styles for the unordered list to make it a menu.

#cc-menu ul li{
	display:inline;
	float:left;
	list-style:none;
	position:relative;
	margin: 0 5px;
}

#cc-menu li a{
	color:#000;
	text-decoration:none;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	padding:10px;
	background: #f2f6f8;
	background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 50%, #b5c6d0 51%, #e0eff9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f6f8), color-stop(50%,#d8e1e7), color-stop(51%,#b5c6d0), color-stop(100%,#e0eff9));
	background: -webkit-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
	background: -o-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
	background: -ms-linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
	background: linear-gradient(top, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%);
	border:1px solid #A8B7BF;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

Ok, so as we have included the basic CSS and CSS3, lets break the above code. We have used #cc-menu ul li to get to the li tag inside ul which is located in the #cc-menu id. Next we have to style the anchor tag (a) inside li, this is also basic styling until CSS3 comes into play! We have made a CSS3 gradient code and changed a border radius. To easily generate CSS3 gradients visit colorzilla Step 3 Since we will make a two-level drop down menu we will have to include another list inside a list-item (li).

<li><a href="#">ITEM 1</a>
    <ul>
        <li><a href="#">sub item 1</a></li>
        <li><a href="#">sub item 2</a></li>
        <li><a href="#">sub item 3</a></li>
    </ul>
</li>
<li><a href="#">ITEM 2</a>
    <ul>
        <li><a href="#">sub item 1</a></li>
        <li><a href="#">sub item 2</a></li>
        <li><a href="#">sub item 3</a></li>
    </ul>
</li>

Step 4 Now we will be styling the list inside the list (sounds weird but CSS is powerful enough to handle this!) To style the list inside the list-item we will use the below code, more over since we only want to display the list on mouse over, we will initially hide it. We wont be using display:none; because it is not possible to use CSS3 transition effects on this, so we will set opacity: 0; and height:0; To implement transition effects we will use -[browser]-transition. Here, all means that any change that can take place on an action. 0.5s means the time in which the transition will complete. ease-in means how the easing effect of transition will take place. To style list-items inside a list-item we use li li.

#cc-menu li ul{
	margin:0px;
	padding:0px;
	display: block;
	height: 0;
	width:200px;
	overflow: hidden;
	opacity: 0;
	position:absolute;
	-webkit-transition: all 0.5s ease-in;
	-moz-transition: all 0.5s ease-in;
	-o-transition: all 0.5s ease-in;
}

#cc-menu li li
{
	padding:10px 0;
	list-style:none;
	display:list-item;
	margin:0px;
	float:none;
}

#cc-menu li li a{
	margin:0px;
}

Step 5 As per final part we will use the :hover pseudo class In the hover state we will set the opacity to 1 and height to auto.

#cc-menu li:hover ul
{	height:auto;
	opacity:1;
	margin:10px 0;
	display:block;
	width:200px;
}