For navigation dropdown on mouseover

For navigation dropdown on mouseover

<style type="text/css">
a{ text-decoration:none;}
.paw-nav{ float:left; width:100%;}
.paw-nav ul{ float:left; background-color:#906; text-decoration:none; list-style:none; width:100%; margin:0px; padding:0px;}
.paw-nav ul li{ width:150px; height:45px; line-height:45px; float:left;  text-align:center;}
.paw-nav ul li a{ color:#FFF;}
.paw-nav ul li li{ background-color:#000; color:#FFF; cursor:pointer; display:none;}
.paw-nav ul li li:hover{ background-color:#FFFF33; color:#000;}
               

</style>



<div class="paw-nav">
<ul>
<li><a href="#">Home</a></li>



<li><a href="#">About</a>
<ul>
<li>about 1</li>
<li>about 2</li>
<li>about 3</li>
</ul> 
</li>


<li><a href="#">Services</a></li>


<li><a href="#">Products</a>
<ul>
<li>Products 1</li>
<li>Products 2</li>
<li>Products 3</li>
</ul> 
</li>

<li><a href="#">Query</a></li>
<li><a href="#">Contact Us</a></li>
 </ul>


</div>

<!-- for Jquery.min.js Download on J-Query.com website  -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    $('.paw-nav li').hover(function(){
$(this).find('ul>li').fadeToggle(500);
});
});


</script>