一个简单清爽的导航条

baiyejianxin

一个简单清爽的导航条
!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=gb2312" />
title>当行条/title>
script src="js/jquery-1.3.2.js">/script>
script>
   var obj = null ;
   function checkHover(){
     if(obj){
     obj.find("ul").fadeOut('fast');
     }
   }
   $(document).ready(function(){
     $(".mainList>li").hover(function(){
     if(obj){
         obj.find("ul").fadeOut('fast');
             obj=null;
         }
         $(this).find("ul").fadeIn('fast');
     },function(){
     obj=$(this);
         setTimeout("checkHover()",400);
     });
     
   });
/script>
style>
.mainList{ width:200px; list-style:none; border:2px solid #006633}
.mainList li{ width:150px; margin:1px; background-color:#CCFF66;}
.secondList{ width:100px; list-style:none; background-color:#CC6633; margin:1px; display:none}
/style>
/head>
body>
  ul class="mainList">
    li>
     test1
     ul class="secondList">
     li>test_1/li>
         li>test_2/li>
     /ul>
    /li>
    li>
     test1
     ul class="secondList">
     li>test_1/li>
         li>test_2/li>
     /ul>
    /li>
    li>
     test1
     ul class="secondList">
     li>test_1/li>
         li>test_2/li>
     /ul>
    /li>
    li>
     test1
     ul class="secondList">
     li>test_1/li>
         li>test_2/li>
     /ul>
    /li>
    li>
     test1
     ul class="secondList">
     li>test_1/li>
         li>test_2/li>
     /ul>
    /li>
  /ul>
/body>
/html>


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u3/93876/showart_2041096.html