1个隐藏ul代码如下<ul id="J_OrderByList" class="order-options item-list"><li class="by-price-asc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-asc">价格从低到高</a></li><li class="by-price-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=price-desc">价格从高到低</a></li><li class="by-credit-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=credit-desc">信用从高到低</a></li><li class="by-sale-desc"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=sale-desc">销量从高到低</a></li><li class="by-default selected"><a href="/search?q=sdf&commend=all&ssid=s5-e&bcoffset=2&sort=commend">恢复默认排序</a></li></ul>然后点击span（就是你看到的那个排序的模拟select）就会display他然后定位到他的下面就可以了
很多具有分类导航菜单都有这种效果！<!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" /><script type=text/javascript><!--//--><![CDATA[//><!--function menuFix() {var sfEls = document.getElementById("menu").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].οnmοuseοver=function() { //这里改一下事件，下面的项目加超级链接即可！this.className=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].οnmοuseοut=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), "");}}}window.οnlοad=menuFix;//--><!]]></script><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { width:977px; height:28px; margin:0 auto;background:#000;}#menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; width:90px; margin-left:3px; background:url(menuico.gif) center right no-repeat;}#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:#000000; font-size:14px; color:#FFFFFF}#menu ul li a:hover { background:#2c2c2c; color:green;}#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}#menu ul li ul li { float:none; width:87px; background:#2c2c2c; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#000; color:green;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}</style></head><body><div id="menu"><ul> <li><a href="#">网站首页</a></li> <li><a href="#">公司简介</a> <ul> <li><a href="#">企业文化</a></li> <li><a href="#">组织结构</a></li> <li><a href="#">公司资质</a></li> </ul> </li> <li><a href="#">新闻中心</a> <ul> <li><a href="#">公司新闻</a></li> <li><a href="#">行业新闻</a></li> <li><a href="#">装修知识</a></li> </ul> </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> </ul></div></body></html>上面的是鼠标移动移出事件，事件自己更改，然后超级连接里可以加AJAX效果，连接到后台去更新数据！
<!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" /><script type="text/javascript">var $=function(id){return document.getElementById(id);}var flag=true;function menuFix() {$('msort').οnclick=function(){ if(flag==true) {$('sort').style.display='block';flag=false;} else {$('sort').style.display='none';flag=true;} }}window.οnlοad=menuFix;</script><style type="text/css">body { font-family: Verdana; font-size: 12px; line-height: 1.5; }a {color: #000; text-decoration: none;}#menu {position:relative;width:120px;margin:0 auto;background:#fff;}#menu ul {list-style: none;margin: 0px; padding: 0px;width:120px;}#menu ul li {float:left; width:120px; }#menu ul li a {display:block; width:120px; height:28px; line-height:28px; text-align:center; background:#fff; font-size:12px;}#msort{border:1px solid #ccc;}#sort{border:1px solid #ccc;width:120px;display:none; position:absolute;top:28px;left:0px;}#sort ul li {border-bottom:1px dashed #ccc;float:none; width:120px; background:#fff; margin:0;}#sort ul li a{background:none; width:120px;}#sort ul li a:hover{background:#000;color:#fff;}</style></head><body><div id="menu"><ul> <li id='msort'><a>默认排序</a></li><li id='sort'> <ul > <li><a href="#">价格从低到高</a></li> <li><a href="#">价格从高到低</a></li> <li><a href="#">信用从低到高</a></li><li><a href="#">信用从高到低</a></li> </ul> </li> </ul></div></body></html>这个会更直接一些！IE/FF/CHROME都测试过了！外型都是一样的。
