推荐css打造经典鼠标触发显示选项


答案：看到了 分享：绝对经典的滑轮新闻显示(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" style="margin:0px 15px 2px 0;" value="搜索工作" /> 
      </div> 
      <div class="searchMore"> 
        高级搜索
分类搜索      </div> 
  </form>  
</div> 
</body> 
</html>

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一个：仿客齐集首页导航条DIV+CSS+JS [代码实例]
下一个：把 CDATA 中的内容（有可能是不规范的Html代码）以Html方式展现出来。
更多图片编程知识: