第八章：下拉及多級彈出菜單

 二維碼 192
發表時間：2015-12-23 22:36作者：敖游來源：遨游建站網址：http://m.oudifangfumu.com

　　第一行設置二級菜單的灰色邊框；為了美觀，我們把下拉菜單的寬度設置成和一級菜單寬度相同，第二行的width:85px再加上第一行上設置的邊框左右各1px后正好是87px，和一級菜單寬度相同。margin:0是為了清除掉繼承一級菜單中margin-left:2px；最后一行設置鼠標劃過時的樣式。

　　再預覽一下，是不是基本的樣式已實現了。

　　

　　下一步就該把二級菜單隱藏，當鼠標劃過時顯示出來了。增加如下代碼：

　　#menu ul li ul { display:none; border:1px solid #ccc;}

　　#menu ul li:hover ul { display:block;}

　　注意第二行的寫法，#menu ul li:hover ul這個樣比較難理解，它的意思是定義當鼠標劃過#menu下ul下li時，li下的ul的樣式（有點饒舌），這里設置為display:block，意思是鼠標劃過時顯示這塊內容。開始隱藏，鼠標劃過時顯示， 這就實現了我們想要的效果。目前IE6只支持a的偽類，其它標簽的偽類不支持，所以要想在IE6下也顯示正確，需要借助js來實現。我們定義一個類.sfhover（自己命名，需和JS中相同）的屬性為display:block;然后當鼠標劃過后，用JS給當前li添加上這個樣式上，根據css的優先級：指定的高于繼承的原則，就實現了IE6下的正確顯示。所以增加如下代碼：

　　#menu ul li.sfhover ul { display:block;}

　　認真跟著教程制作的朋友可能已經發現，現在應用的JS和縱向導航時應用的不樣，但最終實現的效果是一樣的。同理css在布局網站時，也是可以多種方法的，正所謂條條大道通羅馬，希望大家舉一反三，加深前面教程的掌握。JS部分本例不做講解，如果你想弄清楚JS是如何實現的，請學習js相關內容。到這里，本例就基本完成了，還有一個問題是當前導航下有內容的話，如果二級菜單顯示，將會把下邊的內容擠跑，所以需要給#menu ul li ul增加position:absolute;屬性，當其絕對定位后，它將脫離原來文檔流，不再占據空間，因此也不會再把下邊內容擠跑了。完整的預覽代碼如下：

　　<!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" content="text/html; charset=gb2312" />

　　<script type=text/javascript><!--//--><![CDATA[//><!--

　　function menuFix() {

　　var sfEls = document.getElementById("menu").getElementsByTagName("li");

　　for (var i=0; i<sfEls.length; i++) {

　　sfEls[i].onmouseover=function() {

　　this.className+=(this.className.length>0? " ": "") + "sfhover";

　　}

　　sfEls[i].onMouseDown=function() {

　　this.className+=(this.className.length>0? " ": "") + "sfhover";

　　}

　　sfEls[i].onMouseUp=function() {

　　this.className+=(this.className.length>0? " ": "") + "sfhover";

　　}

　　sfEls[i].onmouseout=function() {

　　this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

　　"");

　　}

　　}

　　}

　　window.onload=menuFix;

　　//--><!]]></script>

　　<style type="text/css">

　　body { font-family: Verdana; font-size: 12px; line-height: 1.5; }

　　a { color: #000; text-decoration: none; }

　　a:hover { color: #F00; }

　　#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　#menu ul li { float:left; margin-left:2px;}

　　#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}

　　#menu ul li a:hover { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}

　　#menu ul li a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

　　#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}

　　#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}

　　#menu ul li ul li a { background:none;}

　　#menu ul li ul li a:hover { background:#333; color:#fff;}

　　#menu ul li:hover ul { display:block;}

　　#menu ul li.sfhover ul { display:block;}

　　</style>

　　</head>

　　<body>

　　<div id="menu">

　　<ul>

　　<li><a id="current" href="#">首頁</a></li>

　　<li><a href="#">網頁版式</a>

　　<ul>

　　<li><a href="#">自適應寬度</a></li>

　　<li><a href="#">固定寬度</a></li>

　　</ul>

　　</li>

　　<li><a href="#">web教程</a>

　　<ul>

　　<li><a href="#">新手入門</a></li>

　　<li><a href="#">視頻教程</a></li>

　　<li><a href="#">常見問題</a></li>

　　</ul>

　　</li>

　　<li><a href="#">web實例</a></li>

　　<li><a href="#">常用代碼</a></li>

　　</ul>

　　</div>

　　</body>

　　</html>

　　提示：可以先修改部分代碼后再運行

廣告投放問題
網站建設問題
小程序設計問題

以信載商，良心建站。遨游始終秉承“一次建站、終身維護”的宗旨，竭誠為客戶提供最優質的互聯網服務。遨游建站率先植入seo優化理念，讓你的網頁更利于搜索引擎抓取，關鍵詞排名更靠前。可仿站、可定制。無論是傳統型企業官網、集團型品牌官網，還是營銷型網站、電商型網站、定制型網站、特殊行業網站（醫療、教育），全部搞定。

公司：網站建設_小程序設計_競價托管代運營公司；郵箱：1013601535@qq.com

手機：17073547034；QQ： 1013601535

在線留言咨詢，24小時內回復
我想咨詢
*
企業名稱
手機號碼
*
您的姓名
所在城市
提交
最新發布
我們是中小企業可信賴的合作伙伴！始終專注一件事，一站式互聯網信息技術服務商
19240102767
全國統一服務熱線
遨游建站是全國高端網站建設公司，提供廣州企業網站建設/小程序開發/購物網站設計制作與競價托管代運營服務；秉承“一次建站，終身維護”的宗旨，有償提供互聯網技術支持。
本站部分圖片、音頻、視頻來源于網絡，版權歸原作者，如有侵權請聯系我們刪除。
手
機
站
后
臺
管
理
主站蜘蛛池模板： 伊人色综合久久天天网| 浪潮AV色综合久久天堂| 久久婷婷五月综合色精品| 伊人色综合视频一区二区三区| 亚洲欧美日韩综合久久久久| 色婷婷五月综合欧美图片| 亚洲综合AV在线在线播放| 亚洲综合av一区二区三区不卡| 日日狠狠久久偷偷色综合0| 久久久久久综合一区中文字幕| 久久久久久久综合综合狠狠| 久久综合九九亚洲一区| 色综合久久88色综合天天 | 亚洲精品第一综合99久久| 亚洲AV综合色区无码一区爱AV| 色综合天天综合高清网| 六月婷婷国产精品综合| 亚洲精品综合久久中文字幕| 国产成人综合久久精品红| 亚洲综合久久综合激情久久| 色久悠悠婷婷综合在线亚洲| 亚洲国产综合精品中文字幕| 色综合久久一区二区三区| 综合欧美五月丁香五月| 色爱无码AV综合区| 色777狠狠狠综合| 国产91色综合久久免费| 国产成人综合网在线观看| 伊人久久大香线蕉综合网站| 天天影视色香欲性综合网网站| 久久婷婷五月综合97色 | 人人狠狠综合久久亚洲88| 亚洲综合另类小说色区色噜噜| 国产尹人香蕉综合在线电影| 亚洲国产精品综合久久网络| 区三区激情福利综合中文字幕在线一区| 国产精品综合一区二区| 精品久久人人做人人爽综合| 丁香亚洲综合五月天婷婷| 国产亚洲综合色就色| 亚洲综合久久一本伊伊区|