代码如下：

jquery 导航菜单_www.


   $(document).ready(function(){
    $("#nav-one li").hover(
     function(){ $("ul", this).slideDown("1000"); },
     function() {$("ul", this).slideUp("1000"); }
    );
   if (document.all) {
     $("#nav-one li").hoverClass ("sfHover");
    }
   });
  
   $.fn.hoverClass = function(c) {
    return this.each(function(){
     $(this).hover(
      function() { $(this).addClass(c); },
      function() { $(this).removeClass(c); }
     );
    });
   };  



/* Navigation */
.nav, .nav ul { list-style: none;margin: 0;padding: 0;}
.nav {font-family: Arial, Helvetica, sans-serif;z-index: 100;position: relative;}
.nav li {border-left: 1px solid #000;float: left; margin: 0;padding: 0;position: relative;}
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited {font: bold 1.22em/25px Arial, Helvetica, sans-serif;
background: #565656;color: #959595;display: block; padding: 0 9px;text-transform: lowercase; text-decoration: none;}

#nav-one li:hover a, #nav-one li.sfHover a {background: #00f;color: #fff;}
#nav-one li:hover ul a, #nav-one li.sfHover ul a { background: #565656;color: #959595; }
#nav-one li:hover ul a:hover, #nav-one li.sfHover ul a:hover {background: #f00;color: #fff; }

.nav ul{background: #565656; border-bottom: 1px solid #000;width: 100px;position: absolute;top: 25px; display:none;left: -1px;}
.nav li:hover ul,.nav li.sfHover ul { display: block;}

.nav ul li {border: 0;float: none;}
.nav ul a {border: 1px solid #000;border-bottom: 0;padding-right: 20px;width: 80px; white-space: nowrap;}
.nav ul a:hover {background: #ccc;color: #000;}




    

     item 1
     

      
item 1.1
      
item 1.2
      
item 1.3
      
item 1.4
     
    
    

     item 2
     

      
item 2.1
      
item 2.2
     
    
    

     item 3
     

      
item 3.1
      
item 3.2
     
    
    

     item 4
     

      
item 4.1
      
item 4.2
      
item 4.3
     
    
   

您可能感兴趣的文章: