jquery语言下拉菜单--（解决滑动菜单晃动问题）

       今天教大家用jquery语言制作下拉菜单--本教程已解决了jquery的 hover 滑动菜单晃动问题，大家可以参照本例源码制作。（转帖请注明：来自中山大学数计学院网页设计培训中心。） 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery语言下拉菜单--（解决滑动菜单晃动问题）</title>
<style type="text/css">
 body {
 font-size: 12px;
 margin:0px;
 padding:0px;
 
 }
 ul,li{
  padding:0px;
  margin:0px;
  list-style:none;
 }
 a:link{
  text-decoration:none;
  color:#000;
 }
 a:visited{
  text-decoration:none;
  color:#000;
 }
 a:hover{
  text-decoration: underline;
  color: #0033CC;
 }
 #nav{
 width:810px;
 height:28px;
 }
 #nav ul li{
  float:left;
  width:198px;
  height:23px;
  position:relative;
  padding:7px 0px 0px 0px;
  background-color:#336699;
  color:#FFFFFF;
  
 }
 #nav ul li ul{
 text-align:center;
 
 position:absolute;
 width:198px;
 top: 30px;
 right:0px;
 z-index:99px;
 display:none; 
 }
 #nav ul li ul li{
 background: #666; 
 }
 
</style>
<script language="javascript" src="wendang/jquery.min.js"></script><!--引用JQUERY库代码，请注意路径-->
<script language="javascript"> 
 $(document).ready(function(){
    $('#nav ul li').hover(function()
    {
      $(this).children('ul').stop(true,true).slideDown('fast');
    },
    function()
    {
      $(this).children('ul').stop(true,true).slideUp('fast');
   
    }
    );
   
    $("#nav ul li ul li").hover(function(){
   $(this).css("background","#99CCCC");
   },function(){
   $(this).css("background","#666");
    });
  
   
 });
 
 
 
 function wx()
 {
  alert("欢迎观看本教程，更多请查阅www.s6k8.com");
  
  window.open('http://www.s6k8.com', 'newwindow', 'height=1000, width=1000, top=0, left=0, toolbar=yes,menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes')
 }
 
 
 
</script></head><body onload="wx()">
<div id="nav">
 <ul>
     <li>
         广州中山大学
           
            <ul>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
                </li>
            </ul>
           
        </li>
        <li>
         数学与计算机学院
           
            <ul>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
                </li>
            </ul>
           
        </li>
        <li>
         
         网页设计培训
         
            <ul>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
                </li>
            </ul>
          
        </li>
        <li>
         
         www.s6k8.com
         
            <ul>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">广州中山大学</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">数学与计算机学院</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">网页设计培训中心</a>
                </li>
                <li>
                 <a href="http://www.s6k8.com" target="_blank">www.s6k8.com</a>
                </li>
            </ul>
           
        </li>
    </ul>
</div>
</body>
</html>

解决方案 »

  1.   

    人品啊。人品。 
    function wx()
     {
      alert("欢迎观看本教程，更多请查阅www.s6k8.com");
       
      window.open('http://www.s6k8.com', 'newwindow', 'height=1000, width=1000, top=0, left=0, toolbar=yes,menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes')
     }
      
     
     
    </script></head><body onload="wx()">
      

  2.   

    可以再简单一点：
      $('#nav ul li').hover(function(){
    $(this).children('ul').stop(true,true).slideToggle()
      });
       
      $("#nav ul li ul li").hover(function(){
       $(this).toggleClass('m_over')
      });.m_over{
    background-color:#99CCCC !important;
    }