模板無憂
網頁特效
每日更新
|
TOP排行榜
|
Tag標簽
|
充值
無憂首頁
網頁模板
程序模板
建站教程
視頻教程
網頁特效
圖標素材
字體下載
站長工具
站長問答
網頁特效
菜單導航
圖片特效
文本鏈接
層和布局
頁面背景
表單按鈕
日期時間
計算轉換
鍵盤鼠標
瀏覽器
游戲娛樂
綜合其它
常用代碼
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在線編輯器
Mootools
HTML
JS廣告代碼合集
站長工具
站長常用軟件
網站綜合查詢
Alexa排名查詢
Google PR查詢
域名Whois查詢
網站收錄查詢
友情鏈接查詢
CSS2中文手冊
CSS精簡優化工具
網頁特效代碼
模板無憂
>
網頁特效
>
菜單導航特效代碼
>
收藏
分享
查看評論
菜單導航
演示
簡約、兼容好的XHTML+css二級導航菜單_菜單導航特效
查看演示效果
特效Tag：
二級菜單
添加
簡約、兼容好的XHTML+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" mrc="text/html; charset=utf-8" /> <title>純CSS+XHTML下拉菜單</title> <style type="text/css"> <!-- * { margin:0; padding:0; } body { font:12px Verdana, Geneva, sans-serif #333; line-height:1.5; } ul li { list-style:none; } .menu { width:660px; margin:20px auto; } .menu li { display:inline; float:left; margin:0 5px; background:#f2f2f2; border:1px #39c solid; text-align:center; font-size:14px; font-weight:700; line-height:30px; cursor:hand; } .tuckUp { display:inline; width:120px; height:30px; overflow:hidden; background:#f2f2f2; } .pullDown{ display:inline; height:auto; } .item a:link, .item a:visited { display:inline; float:left; width:110px; background:#ccc; text-align:center; color:#444; font-size:12px; font-weight:normal; text-decoration:none; line-height:25px; margin:0 5px 5px 5px; } .item a:hover { display:inline; float:left; background:#39c; width:100px; color:#FFF; text-decoration:none; text-align:center; font-size:12px; font-weight:700; font-weight:normal; line-height:25px; padding:0 0 0 10px; margin:0 5px 5px 5px; } // --> </style> </head> <body> <ul class="menu"> <li class="tuckUp" onmousemove="this.className='pullDown'" onmouseout="this.className='tuckUp'">精品特效 <div class="item"><a href="/">網頁特效</a></a><br /> <a href="/">層和布局</a></a><br /> <a href="/">表單按鈕</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">菜單導航 <div class="item"><a href="/">菜單導航</a><br /> <a href="/">CSS菜單</a><br /> <a href="/">JQUERY菜單</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pullDown'" onmouseout="this.className='tuckUp'">源代碼 <div class="item" ><a href="/">源碼下載</a><br /> <a href="/">ASP分類</a><br /> <a href="/">PHP分類</a><br /> <a href="/">ASP.NET</a><br /> </div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">更新匯總 <div class="item"><a href="/">最新更新</a><br /> <a href="/">最新更新</a><br /> <a href="/">網站首頁</a><br /></div> </li> <li class="tuckUp" onmouseover="this.className='pUllDown'" onmouseout="this.className='tuckUp'">腳本下載 <div class="item"><a href="/">腳本資源</a><br /> <a href="/">AJAX</a><br /> <a href="/">JQUERY</a><br /> <a href="/">EXTJS</a><br /> </div> </li> </ul> </body> </html>
所屬頻道：
菜單導航特效
/
更新時間：2012-11-15
[收藏]
[報錯]
[返回列表]
相關
菜單導航特效
：
CSS+div+js組合強大實現超酷菜單
超酷仿GOOGLE首頁導航菜單效果
仿網易的滑動門技術DIV+CSS實現
仿藍色理想網站的導航菜單
鼠標觸及帶邊框菜單
用JS實現的類似框架的鏈接導航模式
CSS立體層
右鍵彈出菜單
純css的導航下拉菜單
隱藏菜單效果
css模擬title和alt的提示效果
下拉菜單鏈接頁面打開方式選擇
菜單導航特效Rss訂閱
特效代碼搜索
菜單導航特效推薦
CSS二級菜單，圓角兼容性好
看似透明的紅灰風格網站下拉菜單
懸浮在網頁頂部可關閉的工具條(浮動層)
隱藏菜單
仿藍色理想網站的導航菜單
漂亮淡藍色滑動門代碼
二級菜單居中的橫向CSS下拉菜單
帶缺口導航的CSS菜單欄
分兩個等級的下拉菜單
清新帶圓角的CSS豎向菜單
猜你也喜歡看這些
自由移動的圖片
JavaScript動態控制圖片透明度的變化
JavaScript封裝的平滑圖片滾動，絕不用jQuery
JavaScript圖片選擇器
旗幟
真正的JavaScript圖片淡入淡出特效
Js新聞幻燈圖片輪番播放代碼
讓背景圖片也具有鏈接熱點的功能
圖像過來
JS+CSS給圖片加上鼠標滑過的方框
相關鏈接：
復制本頁鏈接
|
搜索簡約、兼容好的XHTML+css二級導航菜單
特效說明：
菜單導航模板
-
簡約、兼容好的XHTML+css二級導航菜單
。
。。