jquery 导航代码，兼容IE6,IE7,FF,OPREA,谷歌。自己修改其的BUG,特此保存以后研究。 (转)

来源：互联网发布：光翼第六期网络班编辑：程序博客网时间：2024/06/05 21:07

<!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>无标题文档</title>
<script type="text/javascript" src="jquery-ui/js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
   $(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); }
     );
    });
   };
</script>
<style type="text/css">

/* 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;}
</style>
</head>

<body>

</body>
</html>

转自：http://hi.baidu.com/amw_vke/blog/item/ead3dd4c93d914f5d62afc6b.html