Animation Using CSS3

by Prasad

HTML

<div class="wrapper">
	<ul class="dropDown">
    	<li><a href="#">Home</a></li>
        <li><a href="#">About us</a></li>
        <li>Products<span  class="triangle-down"></span>
        	<ul>
            	<li><a href="#">Product Name1</a></li>
                <li><a href="#">Product Name2</a></li>
                <li><a href="#">Product Name3</a></li>
                <li><a href="#">Product Name4</a></li>                
            </ul>
        </li>
         <li>Categories<span  class="triangle-down"></span>
        	<ul>
            	<li><a href="#">Category Name1</a></li>
                <li><a href="#">Category Name2</a></li>
                <li><a href="#">Category Name3</a></li>
                <li><a href="#">Category Name4</a></li>                
            </ul>
        </li>
        <li><a href="#">Contact us</a></li>
    </ul>    
</div>

CSS

ul.dropDown{padding:0px;margin:10px 0 0 0}ul.dropDown li{width:auto;height:auto;background:#fff;transition:1s;-webkit-transition:1s;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;border:1px solid #d3d3d3;color:#7c7c7c;display:inline-block;padding:4px 6px;cursor:pointer;margin:0 4px}ul.dropDown li:hover{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;box-shadow:green 0 10px 36px;cursor:pointer;text-shadow:0 0 #7c7c7c;transition:5s;-webkit-transition:5s}ul.dropDown .triangle-down{margin-left:5px;border-top:4px solid transparent;border-right:10px solid #d3d3d3;border-bottom:4px solid transparent;display:inline-block;vertical-align:middle;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);transition:2s;-webkit-transition:2s}ul.dropDown li:hover>.triangle-down{-webkit-transform:rotate(90deg);transform:rotate(90deg)}ul.dropDown li>ul{display:none;width:auto;height:auto;border:#d3d3d3;position:absolute;z-index:55000;margin:4px 0 0 -7px;padding:0 8px;box-shadow:#e0e0e0 0 10px 36px;border:1px solid #d3d3d3;background-color:#fff}ul.dropDown li:hover>ul{display:block}ul.dropDown li:hover>ul li{display:block;margin:3px 0;box-shadow:0 0 0 0;border:none}a{color:#7c7c7c;text-decoration:none}a:hover,a:active{text-decoration:underline}