DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
CSS入門知識
>>
CSS進階教程
>> 網頁特效之CSS制作的三級下拉菜單
網頁特效之CSS制作的三級下拉菜單
編輯:CSS進階教程  
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>網頁特效|http://homepage.yesky.com/|---CSS 制作的三級菜單</title><style type="text/css"><!--body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}#menu {background-color: #FEF0E5;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#FEF0E5', gradientType='0');}#nav, #nav ul { float:left; /* 菜單總體水平位置 */ clear:right; list-style:none; /*line-height:22px; 一級菜單高 */ /*background: #eee; 所有菜單移出色 */ /*font-weight: bold;8*/ padding:0px; margin:0px; /*border:1px solid #ccc; border-right: 0px;*/}#nav ul ul{ /*border:1px solid #ccc;*/ border-top:0px; border-right:0px;}#nav a { width:120px; display:block; color:#333; text-decoration:none; text-align:left; /*border-right:1px solid #CCC;*/ padding: 3px 4px 3px 7px;}#nav a:hover{color:#000;border:1px solid #CCC;margin: 0px;padding: 3px 5px 3px 6px;background-color: #f1f1f1;text-decoration: none;} /* 所有 a:hover 字體樣式 */#nav a.selected{background:url(flyout_arrow.gif) no-repeat right 50%;} /* 下拉圖標 */#nav li {float:none;clear:right;height:22px;width:120px;}#nav li ul li{float:none;clear:right;height:22px;width:120px;}#nav li ul { /* 二級彈出位 */ position:absolute; margin:-22px 0px 0px 119px; padding:0; left:-9999em; width:120px; font-weight:normal; display:block; border:1px solid #CCCCCC; background:#fff;} /* 二級菜單寬 */#nav li ul a { width:120px; /* 二級菜單寬 */ /*line-height:24px; 二級菜單高 border:1px solid #CCC;*/ height:22px; text-align:left; margin: 0px;}#nav li ul ul {margin:-22px 0px 0px 120px;border:1px solid #CCC;} /* 三級彈出位 */#nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;}#nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{left:auto;height:22px;} /* 所有彈出菜單自動左邊距 */#nav li:hover, #nav li.sfhover {background:#f1f1f1;height:22px;} /* 所有懸浮樣式 */--></style><script type="text/javascript"><!--//--><![CDATA[//><!--img1=new Image();img1.src="flyout_arrow.gif";sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover//b"), ""); } }}window.onload=sfHover;//--><!]]></script></head><body><table width="120" border="0" cellspacing="0" cellpadding="0" > <tr> <td valign="top" id="menu"><ul id="nav"> <li><a href="http://homepage.yesky.com" target="_blank"> <span style="font-size: 9pt">首頁</span></a></li> <li><a href="http://homepage.yesky.com/" target="_blank" class="selected"> <span style="font-size: 9pt">項目需求合作</span></a><span style="font-size: 9pt"> </span> <ul> <li ><a href="http://homepage.yesky.com/" class="selected"><span style="font-size: 9pt">網站項目 </span> </a> <ul> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">網站項目 </span> </a> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">整站項目</span></a></li> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">網站分析策劃</span></a></li> <li><a href="http://homepage.yesky.com/" target="_blank"> <span style="font-size: 9pt">網頁設計制作</span></a></li> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">網站制作與開發</span></a></li> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">網站flash動畫</span></a></li> <li><a href="http://homepage.yesky.com/"> <span style="font-size: 9pt">網站服務器</span></a></li> </ul> </li> <li ><a href="http://homepage.yesky.com/" class="selected"><span style="font-size: 9pt">多媒體設計制作</span></a><span style="font-size: 9pt"> </span> <ul> <li><a href="http://homepage.yes
12下一頁
上一頁:
修改IE浏覽器滾動條樣式的一個實例
下一頁:
網頁特效:用CSS實現的一個字符顯示效果
CSS進階教程
DIV滾動條隨機位置的設置技巧
剛才一個朋友告訴我他的blog友情鏈接太多了,所以把所有鏈接放到一個DIV中,加了個滾動條,可是他又
CSS樣式表實現效果很好的分頁效果源代碼
CSS樣式表實現效果很好的分頁效果,在學習編程過程中由於文章內容比較多或者列表內容比較多,我們都需要
CSS3參考手冊和CSS3代碼生成工具加速你學習網頁制作
CSS3技術現在越來越成熟,通過CSS3的一些新特性(如box-sizing、邊界半徑、文字陰影、漸
相關文章
HTML做的網頁 如何使當前頁面跳轉到另一頁面錨點處
Ajax bootstrap美化網頁並實現頁面的加載刪除與查看詳情
js實現不提示直接關閉網頁窗口
JavaScript+Html5實現按鈕復制文字到剪切板功能(手機網頁兼容)
javascript計算用戶打開網頁的停留時間
Javascript實現帶關閉按鈕的網頁漂浮廣告代碼
JavaScript網頁定位詳解
利用純CSS3實現動態的自行車特效源碼
解析谷歌將網頁加載速度快慢作為影響排名重要因素
可視的Xhtml網頁(CSS)的二維CSS元素圖解
CSS基礎知識
Sass教程
CSS3基礎
關於CSS
CSS進階教程
DIV十CSS布局
CSS特效代碼
CSS詳解
小編推薦
學習css需要什麼軟件
CSS3實例教程:CSS3制作玻璃瓶裡的水母
網頁特效:CSS + JS 構建的圖片查看器
PDF、ZIP、DOC鏈接的標注
網頁布局教程:邊距和絕對定位
常見頁面元素遮住菜單解決方法
CSS入門教程:CSS選擇器
CSS實例教程:Border屬性制作小三角
CSS3網頁制作實例:content屬性的綜合用法
CSS教程:容易忽略的但是很熟悉的CSS屬性
熱門推薦
CSS網頁設計:IE8和IE7共存
調整CSS類型的順序改變鏈接翻滾效果
css網頁制作技巧:margin負值和bug的解決
更有效率的編寫CSS代碼
CSS教程:表格不被撐開的解決辦法
CSS3網頁制作教程:詳解CSS3實現圓角代碼
使用box-shadow、border-radius和transition制作不同的圖片風格
基於firebug的firefox擴展:css usage
Webjx推薦30個網站導航使用CSS的最佳方式
大家都在看
回車直接實現點擊某按鈕的效果即觸發單擊事件
JS操作JSON要領詳細總結
視覺設計實例:亞運官網的改版
認識CSS初始化(重設浏覽器的樣式)
JS中頁面與頁面之間超鏈接跳轉中文亂碼問題的解決辦法
Javascript實現倒計時(防頁面刷新)實例
JavaScript中Textarea滾動條不能拖動的解決方法
JS 實現列表與多選框選擇附預覽動畫
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved