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

<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加背景颜色和边框，边框大小不对应且离开的时候就回复了，实在不清楚这里该怎么搞了，麻烦老师帮忙看一下