CSS代碼精簡(jiǎn)的二級(jí)菜單

2024-09-05 12:20:38

字體：大中小

供稿：網(wǎng)友

代碼精簡(jiǎn)的二級(jí)菜單，代碼確實(shí)夠精簡(jiǎn)的，CSS也沒(méi)幾行，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>二級(jí)菜單</title><style type="text/css">*{margin:0; padding:0}body{width:960px; margin:20px auto; font-size:14px;}/*導(dǎo)航條*/#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="70qarhlowxag"    class="menu">			國(guó)家政務(wù)			<dl class="submenu">				<dd>時(shí)政要聞</dd>				<dd>遠(yuǎn)程黨教</dd>				<dd>村務(wù)管理</dd>			</dl>		</li>		<li>			網(wǎng)絡(luò)服務(wù)		</li>		<li id="70qarhlowxag"    class="menu">			信息交流			<dl class="submenu">				<dd>求購(gòu)信息</dd>				<dd>轉(zhuǎn)讓信息</dd>			</dl>		</li></div><script type="text/javascript"></script></body></html>

上一篇：滑動(dòng)TAB，滑動(dòng)門，CSS+Js代碼

下一篇：jQuery 讓你的Tab菜單滾動(dòng)的代碼