左边的导航条怎么添加背景颜色和边框，我怎么添加都有错误
html：
<!DOCTYPE html>
<html>
<head>
<title>慕淘网</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="head">
<div class="top">
<div class="top_left">
<ul>
<li><a href="#">亲，请登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">手机慕淘网</a></li>
</ul>
</div>
<div class="top_right">
<ul >
<li><a href="#">我的慕淘</a><img src="img/icon/22.png">
<div class="hide">
<ul>
<li><a href="#">已买到的宝贝</a></li>
<li><a href="#">我的足迹</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#">收藏夹</a><img src="img/icon/22.png">
<div class="hide">
<ul>
<li><a href="#">收藏的宝贝</a></li>
<li><a href="#">收藏的店铺</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心</a><img src="img/icon/22.png">
<div class="hide">
<ul>
<li><a href="#">免费开店</a></li>
<li><a href="#">已卖出的宝贝</a></li>
<li><a href="#">出售中的宝贝</a></li>
<li><a href="#">卖家服务市场</a></li>
<li><a href="#">卖家培训中心</a></li>
<li><a href="#">体验中心</a></li>
</ul>
</div>
</li>
</ul>
<ul>
<li><a href="#">联系客服</a><img src="img/icon/22.png">
<div class="hide">
<ul>
<li><a href="#">消费者客服</a></li>
<li><a href="#">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="logo"></div>
</div>
<div class="nav"></div>
<div class="banner"></div>
<div class="floor"></div>
<div class="link"></div>
<div class="foot"></div>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
}
.head{
width: 100%;
height: 150px;
background-color: #f3f5f7;
}
.top{
width: 80%;
height: 50px;
border-bottom: 2px solid rgba(0,0,0,0.3);
margin: 0 auto;
line-height: 50px;
}
.top .top_left{
float: left;
}
.top .top_right {
float: right;
}
.top ul li,.top_right ul{
position: relative;
float: left;
padding-right: 22px;
list-style: none;
}
.top ul li a{
text-decoration: none;
color: rgba(0,0,0,0.7);
}
.top ul li a:hover{
color: red;
}
.top .top_right img{
width: 16px;
height: 16px;
margin-left: 5px;
}
.top .top_left ul li:nth-child(1) a{
color: red;
}
.top .top_right ul li{
position: relative;
width: 100px;
height: 50px;
text-align:center;
}
.top .top_right .hide ul li:hover{
background-color: #cdd0d4;
}
.top .top_right .hide .sty{
text-align:center;
color: rgba(0,0,0,0.7);
position: relative;
}
js：
$(document).ready(function(){
$('.hide').hide();
$('.top_right li ').hover(
function(){
$('.hide',this).slideDown(200);
$(this).children('a:first')
.addClass("sty");
},
function(){
$('.hide',this).slideUp(100);
$(this).children('a:first')
.removeClass("sty");
});
})
正在回答 回答被采纳积分+1
可以给第三个没有下拉列表的导航设置一个类名：
在js中设置样式的时候不考虑这个元素就可以：
css样式：
去掉li的固定高度，添加一个透明的边框，防止鼠标移入的时候，添加边框出现抖动。
js代码：
$(document).ready(function() {
$('.hide').hide();
$('.top_right>ul >li').not('.list').hover(
function() {
$(this).css({ 'background': '#fff', 'border': '1px solid red' }).parent().siblings().children('li').css({ 'border': '1px solid transparent', 'background': 'transparent' });
$(this).children('.hide').css({ 'display': 'block' }).parent().parent().siblings().find('.hide').css({ 'display': 'none' });
$(this).children('a:first').addClass("sty");
},
function() {
$('.top_right>ul >li').css({ 'border': '1px solid transparent', 'background': 'transparent' });
$('.top_right>ul >li .hide').css({ 'display': 'none' })
})
})在这只是给你举了一个例子，可以将样式写在类名中，添加和移除类名即可。
自己可以测试下。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星