看到了 分享：绝对经典的滑轮新闻显示(javascript+css) 这个帖子，都是css+js的控制经典，其实单css就可以搞定了，只不过是为了兼容那垃圾的 ie 才不得做个js ， 以下的代码如果去掉js部分地话，在opear和firrfox都能正常的，但是ie下就不行了。 大家有兴趣的可以测试一下。也希望能帮到有需要的人。
代码如下：
<!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" /> <meta http-equiv="content-language" content="zh-cn" /> <title>css打造鼠标触发效果</title> <meta content="all" name="robots" /> <meta name="author" content="yyt_by@163.com,huanghai,www.hppd.cn 友情制作" /> <meta name="copyright" content="hppd" /> <meta name="description" content="hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> <meta name="keywords" content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog" /> <style type="text/css"> <!-- body { margin: 0; padding: 0; color: #000; font-size: 12px; line-height: 160%; text-align: left; height: 100%; font-family: '宋体',tahoma ,arial,verdana,sans-serif,'lucida grande','lucida sans unicode'; } *{ margin:0; padding:0;} h2,h2 a:link,h2 a:hover,h2 a:visited{ font-size: 14px; text-decoration: none; color: #000000; } .kw_from { padding:20px 0 0 0px; margin: auto; height: 300px; overflow: hidden; width: 650px; } .kw_from .sbtn{ float:left; width:80px; padding: 16px 0 0 0; } .kw_from .searchmore{ float:left; width:80px; padding: 4px; } #searchnav { width:430px; float: left; } #searchnav #conter1, #searchnav #conter3{ float:left; width:250px; } #searchnav #conter2, #searchnav #conter4{ float:left; width:180px; } #searchnav ul { padding: 0; margin: 0; list-style: none; } #searchnav li { float: left; } #searchnav li ul { display: none; top: 20px; } #searchnav li:hover ul, #searchnav li.over ul { display: block; float:left; } #searchnav ul li a{ float:left; display:block; font-size:12px; padding:3px; text-decoration: none; color: #777; } #searchnav ul li a:hover{ background-color:#f4f4f4; } #searchnav #jobkw{ width:220px; height:18px; } #searchnav #citykw{ width:130px; height:18px; } --> </style> <script type="text/javascript"> <!--//--><![cdata[//> <!-- startlist = function() { if (document.all&&document.getelementbyid) { navroot = document.getelementbyid("searchnav"); for (i=0; i<navroot.childnodes.length; i++) { node = navroot.childnodes[i]; if (node.nodename=="li") { node.onmouseover=function() { this.classname+=" over"; } node.onmouseout=function() { this.classname=this.classname.replace(" over", ""); } } } } } window.onload=startlist; //--><!]]> </script> </head> <body> <p class="kw_from"> <form action="/search.html" method="get" name="searchform" id="searchform" onsubmit="return check()"> <ul id="searchnav"> <li id="conter1"><h2>找什么</h2> <input id="jobkw" name="jobkw" type="text" /> <ul id="conter3"> <li><a href="#">会计</a> </li> <li><a href="#">网页设计</a></li> <li><a href="#">翻译</a></li> <li><a href="#">家教</a></li> <li><span class="morecity"><a href="#">更多>> </a></span></li> </ul> </li> <li id="conter2"><h2>在那里</h2> <input id="citykw" name="citykw" type="text" /> <ul id="conter4"> <li><a href="#">北京</a> </li> <li><a href="#">上海</a></li> <li><a href="#">广州</a></li> <li><a href="#">深圳</a></li> <li><a href="#">南京</a></li> <li><a href="#">天津</a></li> <li><a href="#">杭州</a></li> <li><a href="#">成都</a></li> <li><a href="#">重庆</a></li> <li><a href="#">武汉</a></li> <li><a href="#">西安</a></li> <li><a href="#">沈阳</a></li> <li><span class="morecity"><a href="#">更多城市>></a></span></li> </ul> </li> </ul> <p class="sbtn"> <input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="搜索工作" /> </p> <p class="searchmore"> <a href="search_expert.html">高级搜索</a><a href="search_sort.html">分类搜索</a> </p> </form> </p> </body> </html>