Честно говоря, сделал html, для решения вашей проблемы и меню выпадает.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/main.css">
<script type="text/javascript" src="js/script.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$('li').hover(function(){
$(this).children('ul').stop(false, true).fadeIn(300);
},function(){
$(this).children('ul').stop(false, true).fadeOut(300);
});
});
</script>
<style>
ul{
margin: 0;
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 150px;
height: 30px;
line-height: 30px;
text-align: center;
background: #ff0000;
}
ul li a{
text-decoration: none;
color: aliceblue;
}
ul li ul{
background: #ff0000;
color: #fff;
display: none;
}
ul li li a{
text-decoration: none;
display: block;
}
ul li li:hover{
background: #555;
}
</style>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</li>
<li><a href="#">about us</a>
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</li>
<li><a href="#">servises</a></li>
<li><a href="#">faqs</a></li>
<li><a href="#">contact us</a></li>
</ul>
</body>
</html>
