资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
CSS/HTML教程
>>>
超强推荐CSS打造经典鼠标触发显示选项
<!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> <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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%2F%2F--%3E%3C!%5BCDATA%5B%2F%2F%3E%20%0D%0A%3C!--%20%0D%0AstartList%20%3D%20function()%20%7B%20%0D%0Aif%20(document.all%26%26document.getElementById)%20%7B%20%0D%0AnavRoot%20%3D%20document.getElementById(%22searchNav%22)%3B%20%0D%0Afor%20(i%3D0%3B%20i%3CnavRoot.childNodes.length%3B%20i%2B%2B)%20%7B%20%0D%0Anode%20%3D%20navRoot.childNodes%5Bi%5D%3B%20%0D%0Aif%20(node.nodeName%3D%3D%22LI%22)%20%7B%20%0D%0Anode.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D%22%20over%22%3B%20%0D%0A%7D%20%0D%0Anode.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(%22%20over%22%2C%20%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3DstartList%3B%20%0D%0A%2F%2F--%3E%3C!%5D%5D%3E%20%0D%0A%3C%2Fscript%3E"> </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><a href="#" _ewebeditor_ta_href="%23">会计</a> </li> <li><a href="#" _ewebeditor_ta_href="%23">网页设计</a></li> <li><a href="#" _ewebeditor_ta_href="%23">翻译</a></li> <li><a href="#" _ewebeditor_ta_href="%23">家教</a></li> <li><span class="moreCity"><a href="#" _ewebeditor_ta_href="%23">更多>> </a></span></li> </ul> </li> <li id="conter2"><h2>在那里</h2> <input id="cityKw" name="cityKw" type="text" /> <ul id="conter4"> <li><a href="#" _ewebeditor_ta_href="%23">北京</a> </li> <li><a href="#" _ewebeditor_ta_href="%23">上海</a></li> <li><a href="#" _ewebeditor_ta_href="%23">广州</a></li> <li><a href="#" _ewebeditor_ta_href="%23">深圳</a></li> <li><a href="#" _ewebeditor_ta_href="%23">南京</a></li> <li><a href="#" _ewebeditor_ta_href="%23">天津</a></li> <li><a href="#" _ewebeditor_ta_href="%23">杭州</a></li> <li><a href="#" _ewebeditor_ta_href="%23">成都</a></li> <li><a href="#" _ewebeditor_ta_href="%23">重庆</a></li> <li><a href="#" _ewebeditor_ta_href="%23">武汉</a></li> <li><a href="#" _ewebeditor_ta_href="%23">西安</a></li> <li><a href="#" _ewebeditor_ta_href="%23">沈阳</a></li> <li><span class="moreCity"><a href="#" _ewebeditor_ta_href="%23">更多城市>></a></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"> <a href="search_expert.html" _ewebeditor_ta_href="search_expert.html">高级搜索</a> <a href="search_sort.html" _ewebeditor_ta_href="search_sort.html">分类搜索</a> </div> </form> </div> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程