看到了 分享：絕對經典的滑輪新聞顯示(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> <div 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>會計 </li> <li>網頁設計</li> <li>翻譯</li> <li>家教</li> <li><span class="moreCity">更多>> </span></li> </ul> </li> <li id="conter2"><h2>在那裡</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <li>北京 </li> <li>上海</li> <li>廣州</li> <li>深圳</li> <li>南京</li> <li>天津</li> <li>杭州</li> <li>成都</li> <li>重慶</li> <li>武漢</li> <li>西安</li> <li>瀋陽</li> <li><span class="moreCity">更多城市>></span></li> </ul> </li> </ul> <div class="sbtn"> <input name="submit" type="submit" class="btn4" value="搜尋工作" /> </div> <div class="searchMore"> 進階搜尋分類搜尋 </div> </form> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
