CSS代碼精簡的二級菜單

2024-09-05 12:20:38

字體：大中小

來源：轉載

供稿：網友

代碼精簡的二級菜單，代碼確實夠精簡的，CSS也沒幾行，JS代碼也很少，值得借鑒，呵呵，喜歡朋友們好好研究研究…………

<!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><title>二級菜單</title><style type="text/css">*{margin:0; padding:0}body{width:960px; margin:20px auto; font-size:14px;}/*導航條*/#nav {background-color:blue; color:#fff;height:25px;line-height:25px;text-align:center;list-style:none;}	#nav a{color:#fff;}	#nav li{width:75px;float:left;position:relative;z-index:1;}	#nav li .title{display:block;}	#nav li .title:hover{background-color:green;}	#nav li .submenu{width:75px;margin:0 auto;background:green;position:absolute;left:0;top:25px;display:none;}	#nav li .submenu dd{border-top:1px dotted #ddd;color:#fff;}</style></head><body><ul id="nav">		<li id="iwvjtn8m0"    class="menu">			國家政務			<dl class="submenu">				<dd>時政要聞</dd>				<dd>遠程黨教</dd>				<dd>村務管理</dd>			</dl>		</li>		<li>			網絡服務		</li>		<li id="iwvjtn8m0"    class="menu">			信息交流			<dl class="submenu">				<dd>求購信息</dd>				<dd>轉讓信息</dd>			</dl>		</li></div><script type="text/javascript"></script></body></html>

上一篇：滑動TAB，滑動門，CSS+Js代碼

下一篇：jQuery 讓你的Tab菜單滾動的代碼