为何我眼中深含泪水，因为我亲爱的界面啊。

还是觉得做多了对数据库的增删改查，也要做做漂亮界面换换心情。jquery神奇之大，不可一日而蹴。今天的二级下拉菜单使用到了jquery的三个方法，短短一行代码就搞定。

首先看看效果是咋样的：

这个大家都熟悉吧，这个就是鼠标放上去就会自动显示下拉菜单，鼠标移开当然下拉菜单就“没了”咯。

再看看它的布局：

这个一看就明白了，<li>标签下面的<ul>标签是隐藏的(display:none)，鼠标放上<a>链接，就会修改<ul>的display属性，让其显示。

为了突出jquery的伟大之处，我讲一下用普通js+css实现这个效果的方法。

首先定义一个父容器，相当于上面的<li>标签，在父容器中，定义两个子容器，一个是显示的，一个是隐藏的。特别注意一下：隐藏的子容器的位置position是设为absolute的，并且其父容器是position:relative的。简单的说就是子容器绝对定位，跟以它最近的，以定位的父容器为参照物，否则，就是以body为参照物。详情请查看css中的定位知识。

在显示的子容器上添加俩个事件，链接的话有自带的a:hover事件，表示鼠标移上去。其他的话可以用onmouseover，onmouseout事件，触发时间则调用一个function，在function中修改那个隐藏的子容器的display属性，设为“block”。

还有个小问题，就是鼠标一开，那隐藏的子容器马上隐藏，这个不利于用户体验，正常的应该是等过500或600毫秒子容器再隐藏，所以还需要调用window.setTimeout和window.clearTimeout这两个函数。就这么简单，代码差不多就是下面的：

  1. //显示 
  2. function showDiv(id){ 
  3.     if(t1){ 
  4.         window.clearTimeout(t1); 
  5.     } 
  6.     var div = document.getElementById(id); 
  7.     div.style.display="block"; 
  8. } 
  9. //隐藏 
  10. function closeDiv(id){ 
  11.     t1 = window.setTimeout(function (){ 
  12.         var div = document.getElementById(id); 
  13.         div.style.display="none"; 
  14.     },300);  
  15. } 

再看看jquery是怎么做的：

  1. $(function(){ 
  2.     $(".topli").hover( 
  3. //鼠标移上去，则show显示 
  4. function(){$(this).find('.subnav').show();}, 
  5. //鼠标移开，则hide隐藏 
  6. function(){$(this).find('.subnav').hide()}) 
  7. }) 

再来看看jquery中的hover方法：

hover里面的两个参数分别表示鼠标移上去调用的事件函数和鼠标移开的事件函数。

主要源代码：

  1. <link href="css/163css.css" type="text/css" rel="stylesheet"> 
  2. <script src="http://code.jquery.com/jquery-latest.js" type=text/javascript></script> 
  3. <script type="text/javascript"> 
  4. $(function(){ 
  5.     $(".topli").hover(function(){$(this).find('.subnav').show();},function(){$(this).find('.subnav').hide()}) 
  6. }) 
  7. </script> 
  8. </head> 
  9. <body> 
  10. <ul class="mainnav"> 
  11.     <li class="topli"><a class="topa" href="#">首页</a></li> 
  12.     <li class="topli"><a class="topa" href="#">个人服务</a> 
  13.         <ul class="subnav">              
  14.             <li><a href="#">转账付款</a><a href="#">水电煤缴费</a><a href="#">返利商家</a><a href="#">账户管理</a></li> 
  15.         </ul> 
  16.     </li> 
  17.     <li class="topli"><a class="topa" href="#">付款方式</a> 
  18.         <ul class="subnav">              
  19.             <li><a href="#">付款方式介绍</a><a href="#">合作伙伴</a><a href="#">付款方式推荐</a></li> 
  20.         </ul> 
  21.     </li> 
  22.     <li class="topli"><a class="topa" href="#">安全中心</a> 
  23.         <ul class="subnav">              
  24.             <li><a href="#">账户管理</a><a href="#">水电煤缴费</a><a href="#">付款方式推荐</a></li> 
  25.         </ul> 
  26.     </li> 
  27. </ul> 
  28. </body> 

这个也是我在163css.com网站上面看到了，整理了一下（附件上传了）。