Hi friends In this article I’m explaining about CSS3 features animated dropdown menu usin css3.

Description:

Creating a dropdown menu is the most easy way to provide a hierarchal index of different menu items on the website. We could use jQuery scripts to make advanced dropown menu items with animations. But here we are going to make a complete CSS only dropdown menu with animations

It's a sure thing that CSS3 features like transitions, animations and transforms can add extra.

In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.

in this article you'll learn how to create an animated CSS3 dropdown menu

Lets start by the basic HTML frame for a dropdown menu.

HTML

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

Output

This is a 3 level deep menu structure built with basic nested unordered list items. We are wrapping the whole menu in <nav> element as that is the HTML5 standard. You can see that we have nested <ul> items within the <li> items. We give a class of  ‘submenu’ to these nested <ul>  items. These are the sub menu items. The parent <li> item that holds the sub menu item is given the ‘parent’ class name. Lets apply some CSS to this.

CSS

#menu, #menuul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#menu {
    width: 960px;
    margin: 60pxauto;
    border: 1pxsolid#222;
    background-color: #111;
    background-image: linear-gradient(#444,#111);
    border-radius: 6px;
    box-shadow: 01px1px#777;
}
#menu:before,
#menu:after {
    content: "";
    display: table;
}
 
#menu:after {
    clear: both;
}
 
#menu {
    zoom:1;
}
 
#menuli {
    float: left;
    border-right: 1pxsolid#222;
    box-shadow: 1px00#444;
    position: relative;
}
 
#menua {
    float: left;
    padding: 12px30px;
    color: #999;
    text-transform: uppercase;
    font: bold12pxArial, Helvetica;
    text-decoration: none;
    text-shadow: 01px0#000;
}
 
#menuli:hover>a {
    color: #fafafa;
}
 
*html#menulia:hover { /*IE6 only*/
    color: #fafafa;
}
 
#menuul {
    margin: 20px000;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;    
    background: #444;   
    background: linear-gradient(#444,#111);
    box-shadow: 0-1px0rgba(255,255,255,.3);  
    border-radius: 3px;
    transition: all.2sease-in-out;
}
 
#menuli:hover>ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
}
 
#menuulul {
    top: 0;
    left: 150px;
    margin: 00020px;
    _margin: 0; /*IE6 only*/
    box-shadow: -1px00rgba(255,255,255,.3);      
}
 
#menuulli {
    float: none;
    display: block;
    border: 0;
    _line-height: 0; /*IE6 only*/
    box-shadow: 01px0#111, 02px0#666;
}
 
#menuulli:last-child {   
    box-shadow: none;    
}
 
#menuula {    
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}
 
#menuula:hover {
    background-color: #0186ba;
    background-image: linear-gradient(#04acec,#0186ba);
}
 
#menuulli:first-child>a {
    border-radius: 3px3px00;
}
 
#menuulli:first-child>a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6pxsolidtransparent;
    border-right: 6pxsolidtransparent;
    border-bottom: 6pxsolid#444;
}
 
#menuululli:first-childa:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0; 
    border-bottom: 6pxsolidtransparent;
    border-top: 6pxsolidtransparent;
    border-right: 6pxsolid#3b3b3b;
}
 
#menuulli:first-childa:hover:after {
    border-bottom-color: #04acec; 
}
 
#menuululli:first-childa:hover:after {
    border-right-color: #0299d3; 
    border-bottom-color: transparent;   
}
 
#menuulli:last-child>a {
    border-radius: 003px3px;
}

In the CSS  we give the menu a width of 960px and a height of 50px . Each list item is floated left and given a position relative property. Positioning the list items with relative positioning is the key in displaying dropdown submenu items later. We also apply some background color and link colors to the menu items.

The Result is

 in my next post i'll explain about Learn HTML5 New Features