منم یه کد منو با hover نوشتم. که از دو تا افکت برا زیر منوهاش استفاده کردم. شما میتونید هر نوع افکتی ک خودتون خواستین بدین:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type="text/css">
a:link{color:PowderBlue; text-decoration:none;}
a:visited{color:purple;}
a:hover{color:orange;}
a:activ{color:green;}
.lidiv{height:20px; width:110px;
margin-right:1px;
background-color:rgba(10,10,20,.7);
text-align:center;
border-radius:10px;
float:right;
padding:4px 4px 4px 4px;
font-weight:bold;}
.lidiv ul{overflow:hidden;}
.lidiv li{list-style-type:none;}
#submenu-fade{display:none;}
#submenu-ease{display:none;}
</style >
</head>
<body>
<ul>
<li class="lidiv"> <a href="1.html">Home </a> </li>
<li class="lidiv" id="has-submenu1"> <a href="2.html">Contact</a>
<ul id="submenu-fade">
<li class="lidiv"> <a href="1.html">Item 1</a> </li>
<li class="lidiv"> <a href="2.html">Item 2</a> </li>
<li class="lidiv"> <a href="3.html">Item 3</a> </li>
<li class="lidiv"> <a href="4.html">Item 4</a> </li>
<li class="lidiv"> <a href="5.html">Item 5</a> </li>
</ul>
</li>
<li class="lidiv"> <a href="3.html">About Us</a> </li>
<li class="lidiv" id="has-submenu2"> <a href="4.html">Products</a>
<ul id="submenu-ease">
<li class="lidiv"> <a href="1.html">Sub menu1</a> </li>
<li class="lidiv"> <a href="2.html">Sub menu2</a> </li>
<li class="lidiv"> <a href="3.html">Sub menu3</a> </li>
<li class="lidiv"> <a href="4.html">Sub menu4</a> </li>
<li class="lidiv"> <a href="5.html">Sub menu5</a> </li>
<li class="lidiv"> <a href="6.html">Sub menu6</a> </li>
</ul>
</li>
</ul>
</body>
</html>
<script>
$(document).ready(function(){
/*this has fade effect: */
$("#has-submenu1").hover(function(){
$("#submenu-fade").fadeIn(800);
},
function(){
$("#submenu-fade").fadeOut(800);
});
/*this has easing effect: */
$("#has-submenu2").hover(function(){
$("#submenu-ease").slideDown({ duration: 1500, easing: "easeInBounce" });
},
function(){
$("#submenu-ease").slideUp({ duration: 1500, easing: "easeInBounce" });
});
});
</script>
اینم یک منوی دیگه که خودم افکتشو درست کردم : و باز شما میتونین به دلخواه تغییرش بدین:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
a:link{color:PowderBlue; text-decoration:none;}
a:visited{color:purple;}
a:hover{color:orange;}
a:activ{color:green;}
.lidiv{height:20px; width:110px;
margin-right:30px;
background-color:rgba(10,10,20,.7);
text-align:center;
border-radius:10px;
float:right;
padding:4px 4px 4px 4px;
font-weight:bold;}
.lidiv ul{overflow:hidden;}
.lidiv li{list-style-type:none;}
#submenu{
margin-top:4px;
background-color:rgba(10,30,20,.5);
height:7px;
width:0;
border-radius:10px;}
</style >
</head>
<body>
<ul>
<li class="lidiv"> <a href="1.html">Home </a> </li>
<li class="lidiv"> <a href="2.html">Contact</a> </li>
<li class="lidiv"> <a href="3.html">About Us</a> </li>
<li class="lidiv" id="has-submenu"> <a href="4.html">Products</a>
<div id="submenu">
<ul>
<li> <a href="1.html">Sub menu1</a> </li>
<li> <a href="2.html">Sub menu2</a> </li>
<li> <a href="3.html">Sub menu3</a> </li>
<li> <a href="4.html">Sub menu4</a> </li>
<li> <a href="5.html">Sub menu5</a> </li>
<li> <a href="6.html">Sub menu6</a> </li>
</ul>
</div>
</li>
</ul>
</body>
</html>
<script>
$(document).ready(function(){
/*this has a custom effect: */
$("#has-submenu").hover(function(){
$("#submenu").animate({width:'130px'},900);
$("#submenu").animate({height:'200px'},1000);
$("#submenu").animate({fontSize:'16px'},'fast');
$("#submenu li").css('padding','5px 5px 5px 5px');
},
function(){
$("#submenu").animate({height:'7px'},1000);
$("#submenu").animate({width:'0'},500);
$("#submenu").animate({fontSize:'0'},'fast');
$("#submenu li").css('padding','0 0 0 0');
});
});
</script>