JQUERY一个横向的菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试</title> </head> <style type="text/css"> #nav {background:#0CC; margin:0 auto; width:1000px; height:25px;} .n{width:200px; display:inline-block; float:left; border-left:1px dotted #fff;} .t{width:100%; height:25px; background:#999; text-align:center; line-height:150%;} .n ul{margin:0px; padding:0px; list-style:none; text-align:center; position:absolute;display:none; background:#CCC; width:200px;} .n li{width:100%;height:20px;line-height:150%;} #content{clear:both; width:1000px; margin:0 auto; } </style> <script type="text/javascript" src="jquery.js"/></script> <script language="javascript"> $(function(){ $('.t').hover(function(){ var i = $('.t').index($(this)[0]); var e = $('.t').eq(i); e.next('ul').show() },function(){ var i = $('.t').index($(this)[0]); var e = $('.t').eq(i); e.next('ul').hide(); }) $('.t').next('ul').hover(function(){ $(this).show() },function(){ $(this).hide() }) }) </script> <body> <div id="nav"> <div class='n'> <div class="t"> 栏目点击 </div> <ul> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> </ul> </div> <div class="n"> <div class="t"> 栏目点击 </div> <ul> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> </ul> </div> <div class="n"> <div class="t"> 栏目点击 </div> <ul> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> </ul> </div> <div class="n"> <div class="t"> 栏目点击 </div> <ul> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> <li>栏目测试</li> </ul> </div> </div> <div id="content"> 这里是CONTNET的内容 </div> </body> </html>
一直在寻找最简单的代码，发现很多时候，看别人的代码你未必看得懂，可能是功夫不到家，PHP的代码能看懂，但应用到JS上面常常让人头大。
各位见人见智吧。什么问题可能对于高手来说都是略显简单了，希望大家不要笑我小白。
