<li id="gt37v"></li>
<span id="gt37v"><small id="gt37v"></small></span>
<rt id="gt37v"><small id="gt37v"></small></rt>
首頁(yè)
網(wǎng)頁(yè)特效庫(kù)
網(wǎng)頁(yè)特效庫(kù)
導(dǎo)航菜單
按鈕表單
背景特效
時(shí)間日期
圖片特效
鼠標(biāo)特效
文本操作
窗口頁(yè)面
狀態(tài)欄類(lèi)
警告對(duì)話(huà)
綜合應(yīng)用
游戲娛樂(lè)
首頁(yè)
>
特效
>
導(dǎo)航菜單
> 正文
CSS二級(jí)下拉導(dǎo)航菜單
2010-09-06 導(dǎo)航菜單 ℃
<!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>CSS二級(jí)下拉導(dǎo)航菜單</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,html{padding:0;margin:0;text-align:center;font:normal 14px 'arial';} #mainNavBar{width:100%;background:#999;padding:10px 0;} #nav{width:760px;height:30px;margin:0 auto;} #nav ul{padding:0;margin:0;} #nav ul li{position:relative;float:left;width:60px;height:30px;line-height:30px;overflow:hidden;list-style-type:none;} #nav ul li a{display:block;color:#fff;text-decoration:none;} #nav ul li a:hover{font-weight:bold;background:#666;} #subNav{position:absolute;width:150px;top:30px;left:0px;padding:5px;background:#666;color:#fff;text-align:left;} #subNav a{text-decoration:none;font-weight:normal;display:block;} #subNav a:hover{color:#f00;background:#f00;} </style> </head> <body> <div class="bps5z8k" id="mainNavBar"> <div class="2dqi0fx" id="nav"> <ul> <li> <a href="#">添加</a> <div class="1f5cokn" id="subNav"> <a href="#">日志</a> <a href="#">分類(lèi)</a> </div> </li> <li> <a href="#">管理</a> <div class="dk5izne" id="subNav"> <a href="#">分類(lèi)</a> <a href="#">文章</a> </div> </li> <li> <a href="#">擴(kuò)展</a> <div class="khu5gog" id="subNav"> <a href="#">評(píng)論管理</a> <a href="#">留言管理</a> <a href="#">注銷(xiāo)退出</a> </div> </li> </ul> </div> </div> <script language="javascript"> var nav=document.getElementById("nav").getElementsByTagName("li"); for(i=0;i<nav.length;i++){ nav[i].onmouseover=function(){ this.style.fontWeight="bold"; this.style.overflow="visible"; this.style.background="#666666"; } nav[i].onmouseout=function(){ this.style.fontWeight="normal"; this.style.background="#999999" this.style.overflow="hidden"; } } </script> </body> </html>
相關(guān)特效代碼
無(wú)相關(guān)信息
熱門(mén)特效代碼
三級(jí)豎向展開(kāi)/收縮導(dǎo)航菜單
鼠標(biāo)指向彈出菜單
jQuery 彈出菜單層
CSS二級(jí)下拉導(dǎo)航菜單
CSS做的垂直導(dǎo)航菜單效果
橫向二級(jí)導(dǎo)航菜單
仿google首頁(yè)下端圖片文字動(dòng)畫(huà)導(dǎo)
導(dǎo)航鏈接菜單間隔閃爍
動(dòng)態(tài)翻滾的導(dǎo)航條[酷比f(wàn)lash]
純CSS的三級(jí)聯(lián)動(dòng)級(jí)聯(lián)菜單
推薦特效代碼
CSS+div+js組合強(qiáng)大實(shí)現(xiàn)超酷菜單
動(dòng)態(tài)翻滾的導(dǎo)航條[酷比f(wàn)lash]
CSS橫向下拉菜單
微軟風(fēng)格的CSS橫向菜單
立體的CSS按鈕菜單效果
左側(cè)隱藏的菜單
網(wǎng)站首頁(yè)
|
關(guān)于我們
|
游客留言
|
網(wǎng)站地圖
|
免責(zé)聲明
|
返回頂部
陜ICP備05013981號(hào)-6
