                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /形形色色的下拉菜單

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？

有哪位那位大神能上傳一下源代碼嗎

時光幾米

2016-05-27

源自：形形色色的下拉菜單 6-6

關(guān)注問題我要回答

1564

操作

收起

3 回答

HEternally
2017-04-10

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>CSS3實現(xiàn)多級菜單</title>
????<style?type="text/css">
????ul{list-style:?none;}???/*去li前面的小圓點(diǎn)*/
.top-nav{
????width:?960px;
????margin:?60px?auto;
????border:1px?solid?#222;
????background-color:?#111;
????background-image:?linear-gradient(#444,#111);
????border-radius:?6px;
????box-shadow:?0?1px?1px?#777;?????/*水平是0，垂直是1像素，陰影的模糊距離是1像素，模糊顏色是#777*/
????padding:?0;
????/*list-style:?none;*/
????/*overflow:?hidden;????????清除子元素的浮動，以便背景顏色的添加?，但是會出問題，hover后，二級菜單不能顯示*/
}
.top-nav:before,?.top-nav:after{
????content:?"?";
????display:?table;
}
.top-nav:after{
????clear:?both;
}
.top-nav{
????zoom:1;
}/*對IE678，強(qiáng)制清除浮動*/
.top-nav?li{
????float:?left;
????border-right:?1px?solid?#222;
????box-shadow:?1px?0?0?#444;
????position:?relative;
}
.top-nav?li?a{
????float:?left;
????padding:?12px?30px;
????color:#999;
????font:bold?12px;
????text-decoration:?none;???????/*去除超鏈接的下劃線*/
????text-shadow:0?1px?0?#000;?????????/*文本陰影*/
}
.top-nav?li?a:hover{
????color:#fafafa;
}
.top-nav?li?ul{
????_margin:0;??/*針對ie*/
????visibility:?hidden;
????position:?absolute;
????/*list-style:?none;*/
????top:?38px;
????z-index:?1;
????padding:?0;
????background-color:?#444;
????background-image:?linear-gradient(#444,#111);
????box-shadow:?0?-1?0?rgba(255,255,255,.3);
????border-radius:?3px;
????opacity:?0;???/*透明度*/
????margin:?20px?0?0?0;
????transition:?all?.2s?ease-in-out;??????/*?動畫，要結(jié)合hover使用*/
}
.top-nav?li:hover?>?ul{???????????/*>號是選擇子一級的ul，孫一級的ul不會被選擇*/
opacity:?1;
visibility:?visible;
margin:?0;
}
.top-nav?ul?li{
????float:?none;
????display:?block;
????border:0;
????box-shadow:?0?1px?0?#111,0?2px?0?#666;?/*兩個陰影加在一起，會出現(xiàn)一個分割線的效果*/
}
.top-nav?ul?a{
padding:?10px;
width:?110px;
display:?block;
float:?none;
_height:10px;/*針對ie678*/
}
.top-nav?ul?a:hover{
????background-color:?#0186ba;
????background-image:?linear-gradient(#04acec,#0186ba);
}
.top-nav?ul?li:first-child?>?a{
????border-radius:?3px?3px?0?0?;
}
.top-nav?ul?li:last-child?>a?{
????border-radius:?0?0?3px?3px;
}
.top-nav?ul?li:first-child?>?a:before{
????content:?"?";
????position:?absolute;
????left:40px;
????top:?-5px;
????border-left:?6px?solid?transparent;
????border-right:?6px?solid?transparent;
????border-bottom:?6px?solid?#444;
}
.top-nav?ul?li:first-child?>?a:hover:before{
border-bottom-color:?#04acec;
}
.top-nav?ul?ul{
????top:0;
????left:?130px;
????margin:?0?0?0?20px;
????_margin:0;??/*針對ie*/
????box-shadow:?-1px?0?0?rgba(255,255,255,.3);??????????/*r:red?g:green?b:blue?a:alpha透明通道0-1*/
}
.top-nav?ul?ul?li:first-child?>?a:before{
????left:?-5px;
????top:50%;
????margin-top:?-6px;
????border-left:?0px;
????border-bottom:?6px?solid?transparent;
????border-top:?6px?solid?transparent;
????border-right:?6px?solid?#3b3b3b;
}
.top-nav?ul?ul?li:first-child?>?a:hover:before{
????border-right-color:?#0299d3;
????border-bottom-color:?transparent;
}
????</style>
????<script?src="../Script/jquery.js"?type="tet/javascript"></script>
<script>?????????/*jquery實現(xiàn)CSS3的hover*/
????$(function(){
????????if($.browser.msie&&.browser,version.substr(0,1)<7){
????????????$("li").has("ul").mouseover(function(){
????????????????$(this).children("ul").css('visibility','visible');
????????????}).mouseout(function(){
????????????????$(this).children("ul").css('visibility','hidden');
????????????})
????????}
????});
</script>
</head>
<body>
????????<ul>
????????<li><a?href="#">慕課網(wǎng)首頁</a></li>
????????<li><a?href="#">課程大廳</a>?</li>
????????<li><a?href="#">學(xué)習(xí)中心</a>
????????????<ul>
????????????????<li><a?href="#">前端課程</a>
????????????????????<ul>
????????????????????????<li><a?href="#">javascript</a></li>
????????????????????????<li><a?href="#">css</a></li>
????????????????????????<li><a?href="#">jquery</a></li>
????????????????????</ul>
????????????????</li>
????????????????<li><a?href="#">手機(jī)開發(fā)</a></li>
????????????????<li><a?href="#">后臺編程</a></li>
????????????</ul>
????????</li>
????????<li><a?href="#">關(guān)于我們</a></li>
????</ul>
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

QwhateverA
2016-08-03

<!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=utf-8"?/>
	<title>下拉菜單2</title>
	<meta?name="keywords"?content="關(guān)鍵詞"?/>
	<meta?name="description"?content="關(guān)鍵詞描述"?/>
	<script?src="js/js.js"?type="text/javascript"></script>
	<link?href="css/css.css"?rel="stylesheet"?type="text/css"?/>
	<style?type="text/css">
		.top-nav{
			width:?960px;
			margin:0?auto;
			border:?1px?solid?#222;
			background-color:?#111;
			background-image:?linear-gradient(#444,#111);
			border-radius:?6px;
			box-shadow:?0?1px?1px?#777;
		}
		.top-nav:before,.top-nav:after{
			content:?"";
			display:?table;
		}
		.top-nav:after{
			clear:?both;
		}
		.top-nav?li{
			float:?left;
			border-right:?1px?#222?solid;
			box-shadow:?1px?0?0?#444;
			position:?relative;
		}
		.top-nav?li?a{
			float:?left;
			padding:?12px?30px;
			color:?#999;
			font:bold?12px;
			text-shadow:?0?1px?0?#000;
		}
		.top-nav?li?a:hover{
			color:?#fafafa;
		}
		.top-nav?li?ul{
			visibility:?hidden;
			position:?absolute;
			top:38px;
			left:?0;
			z-index:?1;
			background-color:?#444;
			background-image:?linear-gradient(#444,#111);
			box-shadow:?0?-1px?0?rgba(255,255,255,0.3);
			border-radius:?3px;
			opacity:?0;
			margin:??20px?0?0?0;
			transition:??all?.2s?ease-in-out;
		}
		.top-nav?li:hover?>?ul{
			opacity:?1;
			visibility:?visible;
			margin:0;
		}
		.top-nav?ul?li{
			float:?none;
			display:?block;
			border:?0;
			box-shadow:?0?1px?0?#111,0?2px?0?#666;
		}
		.top-nav?ul?li:last-child{
			box-shadow:?0?1px?0?transparent,0?2px?0?transparent;
		}
		.top-nav?ul?a{
			padding:?10px;
			width:?130px;
			float:?none;
			display:?block;
		}
		.top-nav?ul?a:hover{
			background-color:?#0186ba;
			background-image:?linear-gradient(#04acec,#0186ba);
		}
		.top-nav?ul?li:first-child?>?a{
			border-radius:?3px?3px?0?0;
		}
		.top-nav?ul?li:last-child?>?a{
			border-radius:?0?0?3px?3px;
		}
		.top-nav?ul?li:first-child?>?a:before{
			content:?"";
			position:?absolute;
			left:?40px;
			top:-6px;
			border-left:?6px?solid?transparent;
			border-right:?6px?solid?transparent;
			border-bottom:?6px?solid?#444;
		}
		.top-nav?ul?li:first-child?>a:hover:before{
			border-bottom-color:?#04acec;
		}
		.top-nav?ul?ul{
			top:0;
			left:?150px;
			margin:0?0?0?20px;
			box-shadow:?-1px?0?0?rgba(255,255,255,.3);
		}
		.top-nav?ul?ul?li:first-child?a:before{
			left:?-6px;
			top:50%;
			margin-top:?-6px;
			border-left:?0;
			border-bottom:?6px?solid?transparent;
			border-top:?6px?solid?transparent;
			border-right:?6px?solid?#3b3b3b;
		}
		.top-nav?ul?ul?li:first-child?a:hover:before{
			border-right-color:?#0299d3;
			border-bottom-color:transparent;
		}
	</style>
</head>
<body>
	<ul?class="top-nav">
		<li><a?href="#"><span?class="note">首頁</span></a></li>
		<li><a?href="#">課程大廳</a></li>
		<li><a?href="#">學(xué)習(xí)中心?</a>
			<ul>
				<li><a?href="#">前端課程?</a>
					<ul>
						<li><a?href="#">javascript</a></li>
						<li><a?href="#">css</a></li>
						<li><a?href="#">jquery</a></li>
					</ul>
				</li>
				<li><a?href="#">手機(jī)開發(fā)</a></li>
				<li><a?href="#">后臺編程</a></li>
			</ul>
		</li>
		<li><a?href="#">關(guān)于我們</a></li>
	</ul>
</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

紫色_____3689098

請問您做出來和老師效果一樣嗎？ <meta name="keywords" content="關(guān)鍵詞" /> <meta name="description" content="關(guān)鍵詞描述" /> <script src="js/js.js" type="text/javascript"></script> <link href="css/css.css" rel="stylesheet" type="text/css" /> 這些是引用的js還是什么呀

2016-10-11 回復(fù) 有任何疑惑可以回復(fù)我~

慕雪1824825
2016-06-02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

? ? <title>ì?D§2?μ￥</title>

? ? <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

? ? <style type="text/css">

? ? ? ? ? ? html, body, div, span {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

.header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1;}

.header .logo{height:86px;width:256px;margin-top:25px}

.top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative}

.top-nav .navlist{position:absolute;right:130PX;top:-40PX}

.top-nav .navlist .nav-btn{float:left;margin-left:60px;color:#666;vertical-align:middle;text-decoration:none}

.navlist .nav-btn span{background:url(../images/broswer_home.png) no-repeat -29px -145px;display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:middle;*height:12px;*vertical-align:middle;*cursor:pointer;*letter-spacing:0;*margin-left:0;*background-position:-26px -145px}

.navlist .btn-active span{background:url(../images/broswer_home.png) no-repeat -8px -145px;*background-position:-5px -145px}

.top-nav .expand{height:0px;background-color:#333d4d;overflow:hidden;position:relative;width:100%}

.expand .expdiv{height:130px;width:500%;}

.expand .expdiv .item{float:left;width:20%}

.expand .expdiv .item-active{display:block}

.expand .close-btn{width:120px;height:20px;background:url(../images/broswer_home.png) no-repeat -13px -117px;position:absolute;left:50%;bottom:-2px;margin-left:-60px;cursor:pointer;}

.expdiv .expdiv-list{text-align:center;height:56px;padding:37px;color:White}

.expdiv .expdiv-list .btn{display:inline-block;text-decoration:none;color:#586e91;font-size:18px;line-height:24px;margin:0 28px;cursor:pointer}

.expdiv .expdiv-list .btn:hover{color:#7896af}

.expdiv-list .btn .icon{background-repeat:no-repeat;background-image:url(../images/broswer_home.png);height:56px;width:56px;float:left}

.expdiv-list .btn .text{float:left;padding:16px 0 16px 16px}

.expdiv-list .zj .icon{background-position:-4px 0}

.expdiv .expdiv-list .zj{}

.expdiv .expdiv-list .zj:hover .icon{background-position:-5px -57px}

.expdiv .expdiv-list .sjgj{}

.expdiv .expdiv-list .sjgj .icon{background-position:-58px 0}

.expdiv .expdiv-list .sjgj:hover .icon{background-position:-59px -58px}

.expdiv .expdiv-list .wdj{}

.expdiv-list .wdj .icon{background-position:-169px -4px}

.expdiv-list .wdj:hover .icon{background-position:-169px -64px}

.expdiv .expdiv-list .jy{}

.expdiv-list .jy .icon{background-position:-114px 0}

.expdiv-list .jy:hover .icon{background-position:-114px -62px}

.expdiv-list .apple .icon{background-position:-225px -1px;width:38px}

.expdiv-list .apple:hover .icon{background-position:-225px -58px}

.expdiv-list .itools .icon{background-position:-270px 0}

.expdiv-list .itools:hover .icon{background-position:-270px -57px}

.top-nav .nav-bottom-bg{height:7px;_font-size:1px;background-color:#fff}

.btm{ margin:30px auto;}

.btm p{ font:normal 12px/24px 'Microsoft YaHei'; text-align:center;}

? ? ? ? </style>

? ? <script type="text/javascript" src="../Scripts/jquery.js"></script>

</head>

? ? $(function () {

? ? ? ? //navlist

? ? ? ? $('#navList').on('click', '.nav-btn', function (event) {

? ? ? ? ? ? if ($(this).hasClass('btn-active')) {

? ? ? ? ? ? ? ? $('#expandZone #closeBtn').click();

? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? }

? ? ? ? ? ? var curIndex = $(this).index() , mlValue = '-' + curIndex * 100 + '%';

? ? ? ? ? ? if ($('#expandZone').hasClass('active')) {

? ? ? ? ? ? ? ? $('#expandZone .expdiv').animate({ marginLeft: mlValue });

? ? ? ? ? ? }

? ? ? ? ? ? else {

? ? ? ? ? ? ? ? $('#expandZone .expdiv').css({ marginLeft: mlValue });

? ? ? ? ? ? ? ? $('#expandZone').animate({ height: '130px' }).addClass('active');

? ? ? ? ? ? }

? ? ? ? ? ? $(this).addClass('btn-active').siblings().removeClass('btn-active');

? ? ? ? ? ? return false;

? ? ? ? });

? ? ? ? $('#expandZone #closeBtn').on('click', function () {

? ? ? ? ? ? $('#expandZone').animate({ height: '0px' }, function () {

? ? ? ? ? ? ? ? $(this).removeClass('active');

? ? ? ? ? ? ? ? $('#navList .btn-active').removeClass('btn-active');

? ? ? ? ? ? });

? ? ? ? ? ? return false;

? ? ? ? });

? ? });

</script>

<body>

? ?

? ? <div class="wrap">

? ? ? ? <div class="header">

? ? ? ? ? ? <h1 class="logo">

? ? ? ? ? ? ? ? ????í?

? ? ? ? ? ? </h1>

? ? ? ? </div>

? ? ? ? <div class="top-nav">

? ? ? ? ? ? <div id="navList" class="navlist-wrap">

? ? ? ? ? ? ? ? <div class="navlist clearfix">

? ? ? ? ? ? ? ? ? ? <a href="" class="nav-btn" data-device="#homeItem">ê×ò3<span>   </span></a>

? ? ? ? ? ? ? ? ? ? <a href="" class="nav-btn" data-device="#courseItem">??3ì′óìü<span>   </span></a>

? ? ? ? ? ? ? ? ? ? <a href="" class="nav-btn" data-device="#learnItem">?§?°?DD?<span>   </span></a>

? ? ? ? ? ? ? ? ? ? <a href="" class="nav-btn" data-device="#personalItem">??è??DD?<span>   </span></a>

? ? ? ? ? ? ? ? ? ? <a href="" class="nav-btn" data-device="#aboutItem">1?óú?ò??<span>   </span></a>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div id="expandZone" class="expand">

? ? ? ? ? ? ? ? <div class="expdiv">

? ? ? ? ? ? ? ? ? ? <div id="homeItem" class="item">

? ? ? ? ? ? ? ? ? ? ? ? <div class="expdiv-list">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="download-link"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">????í??÷ò3</span></a>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div id="courseItem" class="item">

? ? ? ? ? ? ? ? ? ? ? ? <div class="expdiv-list">

? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="A4"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">?°????3ì</span></a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="A5"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">ê??ú?a·￠</span></a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="A6"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">oóì¨±à3ì</span></a>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div id="learnItem" class="item">

? ? ? ? ? ? ? ? ? ? ? ? <div class="expdiv-list">

? ? ? ? ? ? ? ? ? ? ? ? ? ?<a href="#" target="_blank" class="btn zj" id="A1"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">Javascript</span></a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="A2"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">CSS</span></a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a href="#" target="_blank" class="btn zj" id="A3"><span class="icon"></span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span class="text">JQuery</span></a>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div id="personalItem" class="item">

? ? ? ? ? ? ? ? ? ? ? ? <div class="expdiv-list">

? ? ? ? ? ? ? ? ? ? ? ? ? ??è?D??￠￡o

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div id="aboutItem" class="item">

? ? ? ? ? ? ? ? ? ? ? ? <div class="expdiv-list">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 1???μ??·￡o±±??êD?÷3???μ?ía′ó??10o?

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <div id="closeBtn" class="close-btn">

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="nav-bottom-bg">

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? </div>

? ?

</body>

</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報

0/150

提交

取消

形形色色的下拉菜單

參與學(xué)習(xí) 106933 人
解答問題 563 個

本教程從易到難，循循漸進(jìn)，運(yùn)用不同技術(shù)實現(xiàn)動態(tài)下拉菜單

進(jìn)入課程

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？

我要回答關(guān)注問題

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？

3 回答

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？

為什么跟著視頻敲的代碼，卻一點(diǎn)效果都沒有，有哪位那位大神能上傳一下源代碼嗎？