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

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metahttp-equiv="Content-Language"content="zh-CN"/>
<title>css打造鼠标触发效果</title>
<metacontent="all"name="robots"/>
<metaname="author"content="yyt_by@163.com,huanghai,www.hppd.cn友情制作"/>
<metaname="copyright"content="hppd"/>
<metaname="description"content="hppd,prettydog,honeypig,web设计,交互设计,prettydog"/>
<metaname="keywords"content="f2blog,phpblog,blog,php,xhtml,css,design,w3c,w3,w3cn,hppd,prettydog,honeypig,web设计,交互设计,prettydog"/>
<styletype="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,'LucidaGrande','LucidaSansUnicode';
}
*{margin:0;padding:0;}
h2,h2a:link,h2a:hover,h2a:visited{
font-size:14px;
text-decoration:none;
color:#000000;
}
.kw_from{
padding:20px000px;
margin:auto;
height:300px;
overflow:hidden;
width:650px;
}
.kw_from.sbtn{
float:left;
width:80px;
padding:16px000;
}
.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;
}
#searchNavul{
padding:0;
margin:0;
list-style:none;
}
#searchNavli{
float:left;
}
#searchNavliul{
display:none;
top:20px;
}
#searchNavli:hoverul,#searchNavli.overul{
display:block;
float:left;
}
#searchNavullia{
float:left;
display:block;
font-size:12px;
padding:3px;
text-decoration:none;
color:#777;
}
#searchNavullia:hover{
background-color:#f4f4f4;
}
#searchNav#jobKw{
width:220px;
height:18px;
}
#searchNav#cityKw{
width:130px;
height:18px;
}
-->
</style>
<scripttype="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.οnmοuseοver=function(){
this.className+="over";
}
node.οnmοuseοut=function(){
this.className=this.className.replace("over","");
}
}
}
}
}
window.οnlοad=startList;
//--><!]]>
</script>
</head>
<body>
<divclass="kw_from">
<formaction="/search.html"method="get"name="searchForm"id="searchForm"οnsubmit="returncheck()">

<ulid="searchNav">
<liid="conter1"><h2>找什么</h2>
<inputid="jobKw"name="jobKw"type="text"/>
<ulid="conter3">
<li><ahref="#">会计</a></li>
<li><ahref="#">网页设计</a></li>
<li><ahref="#">翻译</a></li>
<li><ahref="#">家教</a></li>
<li><spanclass="moreCity"><ahref="#">更多&gt;&gt;</a></span></li>
</ul>
</li>
<liid="conter2"><h2>在那里</h2>
<inputid="cityKw"name="cityKw"type="text"/>
<ulid="conter4">
<li><ahref="#">北京</a></li>
<li><ahref="#">上海</a></li>
<li><ahref="#">广州</a></li>
<li><ahref="#">深圳</a></li>
<li><ahref="#">南京</a></li>
<li><ahref="#">天津</a></li>
<li><ahref="#">杭州</a></li>
<li><ahref="#">成都</a></li>
<li><ahref="#">重庆</a></li>
<li><ahref="#">武汉</a></li>
<li><ahref="#">西安</a></li>
<li><ahref="#">沈阳</a></li>
<li><spanclass="moreCity"><ahref="#">更多城市&gt;&gt;</a></span></li>
</ul>
</li>
</ul>
<divclass="sbtn">
<inputname="submit"type="submit"class="btn4"style="margin:0px15px2px0;"value="搜索工作"/>
</div>
<divclass="searchMore">
<ahref="search_expert.html">高级搜索</a><br/><ahref="search_sort.html">分类搜索</a></div>
</form>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值