为了账号安全,请及时绑定邮箱和手机立即绑定

形形色色的下拉菜单

难度初级
时长 3小时21分
学习人数
综合评分9.57
145人评价 查看评价
9.8 内容实用
9.4 简洁易懂
9.5 逻辑清晰
多写才能知道哪错了,就怕不出错,一直懵懵懂懂的学,这样才是最不好的
记住把之前a前的span删掉,chrome亲测可行
2级菜单没有对齐,我试了各种办法都没有对齐。
听不清说的是啥
// 给expdiv类元素赋予动画切换的效果
$("#expandZone .expdiv").css({ marginLeft: mlValue });
}else {
$("#expandZone .expdiv").css({ marginLeft: mlValue });
$("#expandZone").animate({ height: "130px" }).addClass("active");
}
// 模拟点击closeBtn按钮
if($(this).hasClass('btn-active')){
$('#expandZone #closeBtn').click();

return false;
}
听着好无聊,想睡觉
#menu ul li ul li:hover{height:40px;}
li ul li{ background:green;height:40px; text-align:center; line-height:40px; border-bottom:white solid 1px; float:left;}

#menu ul li:hover ul{
display:block;
}
</style>


二、老师的定位去掉也正常,
#menu ul li {float:left; width:100px; padding-right:5px; height:40px; text-align:center; line-height:40px; overflow:hidden;}
a{ text-decoration:none; display:block; height:40px;overflow:hidden;}
#menu ul li:hover{height:200px;}
不适用定位 也可以实现 代码如下:
<style type="text/css">
*{margin:0px;padding:0px;}
ul {list-style-type:none; margin:0 auto;height:40px;}
#menu{ margin: 0 auto; background:gray; width:800px ;height:40px; }
讲道理我没见过哪家网站菜单是这个样子的
其实万恶的IE浏览器还是占据了浏览器市场的半壁江山
要静下来学,吹毛求疵滴要不得
<link rel="stylesheet" href="index.css">

ul li ul li{
float: none;
background-color: #eee;
height: 60px;/*IE7*/
width: 124px;/*IE7*/
margin-bottom:-4px;/*IE7*/
}
$('li.mainlevel').hover(function () {
$(this).find('ul').stop().slideToggle('fast'); //you can give it a speed
});
课程须知
1.您至少具备Html、Css相应的基础知识。 2.您须了解JavaScript和jQuery基础语法和引用方法;
老师告诉你能学到什么?
运用CSS、JavaScript和jQuery三种技术实现下拉菜单制作方法。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消