css制作经典鼠标触发显示选项

<style type="text/css">
*{ margin:0; padding:0;}
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'; }
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">
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>

<div class="kw_from" align="center">
	<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="https://yangjunwei.com">老杨博客</a></li>
					<li><a href="https://yangjunwei.com">网页设计</a></li>
					<li><a href="https://yangjunwei.com">翻译</a></li>
					<li><a href="https://yangjunwei.com">家教</a></li> <br /><br />
					<li><span class="moreCity"><a href="https://yangjunwei.com">更多>> </a></span></li>
				</ul>
			</li>
			
			<br /><br />
			
			<li id="conter2">
				<h2>在那里</h2>
				<input id="cityKw" name="cityKw" type="text" />
				<ul id="conter4">
					<li><a href="https://yangjunwei.com">北京</a></li>
					<li><a href="https://yangjunwei.com">上海</a></li>
					<li><a href="https://yangjunwei.com">广州</a></li>
					<li><a href="https://yangjunwei.com">深圳</a></li>
					<li><a href="https://yangjunwei.com">南京</a></li>
					<li><a href="https://yangjunwei.com">天津</a></li>
					<li><a href="https://yangjunwei.com">杭州</a></li>
					<li><a href="https://yangjunwei.com">成都</a></li>
					<li><a href="https://yangjunwei.com">重庆</a></li>
					<li><a href="https://yangjunwei.com">武汉</a></li>
					<li><a href="https://yangjunwei.com">西安</a></li>
					<li><a href="https://yangjunwei.com">沈阳</a></li>
					<li><span class="moreCity"><a href="https://yangjunwei.com">更多城市>></a></span></li>
				</ul>
			</li>
		</ul>
		
		<div class="sbtn">
			<input name="submit" type="submit" class="btn4" style="margin:0px 15px 2px 0;" value="yangjunwei.com" />
		</div>
		
		<div class="searchMore"></div>
	</form>
</div>

来源：yangjunwei.com