顶部右侧下拉菜单不知道怎么实现二级菜单与相对应一级菜单在同一边框的效果

<div id="main" class="main">
    <!--顶部-->
        <div class="top">
        <!--顶部背景-->
            <div class="top-hr">
            <!--顶部左侧-->
                <div class="top-left">
                    <div><a href="#" class="loginLink" id="loginLink">亲，请先登录</div>
                    <div><a href="#" class="registerLink" id="registerLink">免费注册</a></div>
                    <div><a href="#" class="left-three">手机逛淘宝</a></div>
                </div>
            <!--顶部右侧-->
                <div class="top-right" id="top-right">
                    <div class="title">
                        <div class="words">我的淘宝<img src="素材/icon/22.png"></div>
                        <div class="sub-title">
                            <div>已买到的宝贝</div>
                            <div>我的足迹</div>
                        </div>
                    </div>
                    <div class="title">
                        <div class="words">收藏夹<img src="素材/icon/22.png"></div>
                        <div class="sub-title">
                            <div>收藏的宝贝</div>
                            <div>收藏的店铺</div>
                        </div>
                    </div>
                    <div class="title">
                        <div class="words">商品分类</div>
                    </div>
                    <div class="title">
                        <div class="words">卖家中心<img src="素材/icon/22.png"></div>
                        <div class="sub-title">
                            <div>免费开店</div>
                            <div>已卖出的宝贝</div>
                            <div>出售中的宝贝</div>
                            <div>卖家服务市场</div>
                            <div>卖家培训中心</div>
                            <div>体验中心</div>
                            </div>
                        </div>
                    <div class="title">
                        <div class="words">联系客服<img src="素材/icon/22.png"></div>
                        <div class="sub-title">
                            <div>消费者客服</div>
                            <div>卖家客服</div>
                        </div>
                    </div>
                </div>

*{
    margin: 0;
    padding:0;
    text-decoration: none;
    list-style: none;
}
.main{
    font:14px/1.5 "微软雅黑",Verdana,Tahoma,Arial,sans-serif,"宋体"; 
}
.top{
    width: 100%;
    height: 50px;
    text-align: center;
    background:#f3f5f7;
}
.top-hr{
    width: 1000px;
    height: 50px;
    margin: 0 auto;
    color: #333;
    border-bottom:1px solid #bbb;
}
a{
    color: #333;
}
.top-left{
    width: 300px;
    height: 50px;
    float: left;
    line-height: 50px;
}
.top-left div{
    float: left;
    margin-left: 10px;
}
.loginLink{
    color: red;
}
.loginLink:hover,.top-left-3:hover{
    color: red;
}
.top-right{
    width: 600px;
    float: right;
}
.top-right .title{
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
    float: right;
    cursor:pointer;
    position:relative; 
}
.sub-title{
    position: absolute;
    display: none;
    border:1px solid rgba(135,135,135,0.8);
    width: 100%;
    top:50px;
    left: 0px; 
    background:white
}
.sun-title div{
    display: block;
    height: 20px;
    line-height: 20px;
    margin-top: -1px;
}
.sub-title div:hover{
    background: #cdd0d4;
}
 
.top-right .title:hover .sub-title{
    display: block;
    z-index: 2;
}
.words:hover{
    color: red;
}

这里实现的效果只有二级菜单背景颜色和边框改变，但是视频上的是相对应的一级菜单背景颜色和边框也有改变，试过给一级菜单的hover加背景颜色和边框，边框大小不对应且离开的时候就回复了，实在不清楚这里该怎么搞了，麻烦老师帮忙看一下

堕落菌 2018-05-24

源自：项目：JQ实现瀑布流 5-2 作业题

收起

2回答

好帮手慕夭夭 2018-05-25 14:57:10

根据代码 ,可以使用js添加类控制样式变化哦 . 为一级菜单和二级菜单设置需要改变的样式 , 给title绑定hover事件 ,鼠标移入时使用addClass添加样式 , 鼠标移出使用removeClass移出样式 . 自己动手实战一下吧 ,祝学习愉快 !

收起回答

妮可妮可妮_ 2018-05-25 10:57:02

因为设置了边框,就超出了本来的宽度2px,可以在此处设置负的margin值.试一试是同学想要的效果吗?

收起回答

提问者堕落菌 #1

试了一下，一级菜单并没有什么变化...想要的效果是二级菜单的上边框会在对应一级菜单的上面，且对应一级菜单的背景颜色会和二级菜单一样...类似淘宝网上右上角的下拉菜单的效果......

2018-05-25 11:40:17
妮可妮可妮_ 回复提问者堕落菌 #2

可以在鼠标移入的时候,一级菜单也变成相应的背景颜色,就可以啦!

2018-05-25 14:06:59
提问者堕落菌回复妮可妮可妮_ #3

这样的话就离开一级菜单到二级菜单的时候，一级菜单就没有效果了...

2018-05-25 14:10:45