为什么跟着视频敲的代码，却一点效果都没有，有哪位那位大神能上传一下源代码吗？
有哪位那位大神能上传一下源代码吗
3 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3实现多级菜单</title>
<style type="text/css">
ul{list-style: none;} /*去li前面的小圆点*/
.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，强制清除浮动*/
.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; /* 动画，要结合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; /*两个阴影加在一起，会出现一个分割线的效果*/
}
.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实现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="#">慕课网首页</a></li>
<li><a href="#">课程大厅</a> </li>
<li><a href="#">学习中心</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="#">手机开发</a></li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
<!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="关键词" />
<meta name="description" content="关键词描述" />
<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="#">学习中心 </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="#">手机开发</a></li>
<li><a href="#">后台编程</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
</ul>
</body>
</html>
<!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>ÌØЧ²Ëµ¥</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>
<script language="javascript" type="text/javascript">
$(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">Ê×Ò³<span> </span></a>
<a href="" class="nav-btn" data-device="#courseItem">¿Î³Ì´óÌü<span> </span></a>
<a href="" class="nav-btn" data-device="#learnItem">ѧϰÖÐÐÄ<span> </span></a>
<a href="" class="nav-btn" data-device="#personalItem">¸öÈËÖÐÐÄ<span> </span></a>
<a href="" class="nav-btn" data-device="#aboutItem">¹ØÓÚÎÒÃÇ<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">Ľ¿ÎÍøÖ÷Ò³</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">Ç°¶Ë¿Î³Ì</span></a>
<a href="#" target="_blank" class="btn zj" id="A5"><span class="icon"></span>
<span class="text">ÊÖ»ú¿ª·¢</span></a>
<a href="#" target="_blank" class="btn zj" id="A6"><span class="icon"></span>
<span class="text">ºǫ́±à³Ì</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">
¸öÈËÐÅÏ¢£º
</div>
</div>
<div id="aboutItem" class="item">
<div class="expdiv-list">
¹«Ë¾µØÖ·£º±±¾©ÊÐÎ÷³ÇÇøµÂÍâ´ó½Ö10ºÅ
</div>
</div>
</div>
<div id="closeBtn" class="close-btn">
</div>
</div>
<div class="nav-bottom-bg">
</div>
</div>
</div>
<!-- ´úÂë ½áÊø -->
</body>
</html>
举报
0/150
提交
取消
