关于导航栏的效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin: 0;padding: 0;text-decoration: none;}
.clearfixed {zoom: 1;}
.clearfixed::after {display: block;clear: both;content: "";}
/*导航栏*/
.nav{width: 100%;height: 124px;border-bottom: solid 2px rgb(36,135,201);background-color: #efefef;}
.navbox{width: 1200px;margin: 0 auto;position: relative;}
.sanjiao{width: 0;height: 0;border-style: solid;position: absolute;top: calc(50% - 4px);right: 0;
border-width: 10px 10px 10px 10px;border-color: black transparent transparent transparent;}
.navleft{float: left;position: relative;line-height: 124px;}
.navleft img{display: block;width: 100px;height: 100px;float: left;position: absolute;top: calc(50% - 50px);}
.navleft h1{font-size: 23px;float: left;text-indent: 110px;font-weight: normal;}
.navleft h2{font-size: 15px;float: left;text-indent: 10px;}
.navleft .gang{width: 2px;height: 32px;background-color: black;
position: absolute;left: 345px;top: calc(50% - 16px);}
.navright{position: absolute;right: 0;top: calc(50% - 16px);}
.navright h5{float: left;color: black;font-size: 16px;}
.navright h6{float: left;color: rgb(251,116,3);font-size: 16px;text-indent: 10px;cursor: pointer;}
.imooctitle{float: left;position: relative;margin-left: 20px;color: black;}
.shouji img{display: block;width: 16px;height: 23px;float: left;margin-left: 10px;margin-right: 10px;}
/*下拉菜单*/
.imoocbox{background-color: rgb(288,288,288);border: 2px solid rgb(251,116,3);
position: absolute;top: 26px;left: 370px;display: none;}
.imooc{list-style-type: none;margin: 10px;}
.imooc a{display: block;color: black;}
.imooc a:hover{color: rgb(251,116,3);}
.imooc li{border-bottom: dashed 1px rgb(205,205,205);padding: 10px;}
.margin{margin-bottom: 10px;}
</style>
<title>无标题文档</title>
</head>
<body>
<!--导航栏-->
<div class="nav">
<div class="navbox clearfixed">
<div class="navleft clearfixed">
<img src="img/logo.png" alt="logo">
<h1>慕课高铁客户服务中心</h1>
<div class="gang"></div>
<h2>客户服务</h2>
</div>
<div class="navright clearfixed">
<h5>意见反馈</h5>
<h6>imooc@com</h6>
<h5> 您好，请</h5>
<h6>登录</h6>
<h5> | </h5>
<h5>注册</h5>
<a href="#" class="imooctitle clearfixed">
我的IMOOC
<div class="sanjiao"></div>
<div class="imoocbox">
<ul class="imooc">
<li>
<a href="#" class="margin">未完成订单</a>
<a href="#">已完成订单（改/退）</a>
</li>
<li>
<a href="#">我的保险</a>
</li>
<li>
<a href="#" class="margin">查看个人信息</a>
<a href="#">账户安全</a>
</li>
<li>
<a href="#">常用联系人</a>
</li>
<li>
<a href="#" class="margin">重点旅客预约</a>
<a href="#">遗失物品查找</a>
</li>
<li>
<a href="#">服务查询</a>
</li>
<li>
<a href="#" class="margin">投诉</a>
<a href="#">建议</a>
</li>
</ul>
</div>
</a>
<h5 class="shouji"><img src="img/shouji.png" alt="shouji">手机版</h5>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script>
$('.imooctitle').hover(function(){
$(this).find('.imoocbox').stop().slideDown(500);
}, function(){
$(this).find('.imoocbox').stop().slideUp(500);
}).mousemove(function(){
$(this).find(".sanjiao").stop().animate({transform:'rotate(180deg)'},500).mouseleave(function(){
$(this).find(".sanjiao").stop().animate({transform:'rotate(0deg)'},500);
});
});
</script>
</body>
</html>1.为什么imoocbox的position: absolute的位置没有出现在想要的位置，可以用top:0和left:0测试
（父元素imooctitle已经position: relative;了）
2.为什么写在最后的jq的代码效果没出来，什么都没有
25
收起
正在回答
3回答
同学你好，通过animate无法修改borderBottomColor的属性，animate可以修改的属性可以参考下官网：https://www.w3school.com.cn/jquery/effect_animate.asp 另，如果想要通过animate实现旋转，可以参考如下：
但是效果不太理想，位置无法对齐。
因此不推荐此写法。实现思路：找两张三角形的图片，通过css的hover样式，改变不同的图片。目前还没有学到jquery，且作业是安排在js后面的，所以本作业不推荐使用jquery去实现哦。如果有其他问题建议同学新建提问，以便日后同学对于问题的归纳和总结。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
好帮手慕码
2020-01-18 19:03:46
同学你好，针对你的问题如下解答：
（1）修改之后，样式是没有问题的：
反而是其它的内容，不应该有加粗的效果的。
（2）小三角的动画效果没有出来，是因为jquery的animate无法直接支持transform属性。所以建议同学使用css的hover去实现。
（3）不是很懂“鼠标进入下拉菜单依然显示下拉菜单”是什么意思，经过回复一中的修改之后，下拉菜单的效果是正确的：
效果：
（4）回复一中也提到了哦：
错误的标签嵌套导致浏览器把imooctitle和imoocbox解析为同级了，并不是父子级，而find() 方法返回被选元素的后代元素。所以使用$(this).find('.imoocbox')不能正确生效。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星