这是顶部的代码，感觉太冗余了……请问可以怎么简化一下呢？

以及如何解决菜单宽度变化的问题呢？

HTML

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <link rel="stylesheet" href="css/style.css">
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
   <script src="js/script.js"></script>
</head>
<body>
   
   <div class="container header">
       
       <div class="header_loginbar">
           <a href="#" class="login">亲，请登录</a>
           <a href="#">免费注册</a>
           <a href="#">手机逛慕课</a>
       </div>
       
       <div class="header_nav">
           <div class="header_nav_con">
               <div class="con_mainnav">
                   我的慕课
                   <a href="#"></a>
               </div>
               <div class="con_subnav">
                   <p>已买到的宝贝</p>
                   <p>我的足迹</p>
               </div>
           </div>

           <div class="header_nav_con">
               <div class="con_mainnav">
                   收藏夹
                   <a href="#"></a>
               </div>
               <div class="con_subnav">
                   <p>收藏的宝贝</p>
                   <p>收藏的店铺</p>
               </div>
           </div>

           <div class="header_nav_con">
               <div class="con_mainnav">商品分类</div>
           </div>

           <div class="header_nav_con">
               <div class="con_mainnav">
                   卖家中心
                   <a href="#"></a>
               </div>
               <div class="con_subnav">
                   <p>免费开店</p>
                   <p>已卖出的宝贝</p>
                   <p>出售中的宝贝</p>
                   <p>卖家服务市场</p>
                   <p>卖家培训中心</p>
                   <p>体验中心</p>
               </div>
           </div>

           <div class="header_nav_con">
               <div class="con_mainnav">
                   联系客服
                   <a href="#"></a>
               </div>
               <div class="con_subnav">
                   <p>消费者客服</p>
                   <p>卖家客服</p>
               </div>
           </div>

       </div>
   </div>

</body>
</html>

CSS

*{
   margin: 0;
   padding: 0;
}
body{
   background-color: #f3f5f7;
}
a{
   text-decoration: none;
   font-family: "微软雅黑";
}
.container{
   width: 1200px;
   margin: 0 auto;
}
/*顶部*/
.header{
   font-size: 12px;
   height: 50px;
   line-height: 50px;
   box-sizing: border-box;
   padding: 0 10px;
   border-bottom: 1px solid #ccc;
}
/*顶部_登录信息*/
.header_loginbar{
   float: left;
}
.header_loginbar a{
   color: #666;
   padding-left: 5px;
}
/*顶部_导航菜单*/
.header_nav{
   color: #666;
   float: right;
}
.header_nav_con{
   float: left;
   cursor: pointer;
}
.con_mainnav, .con_subnav p{
   padding: 0 10px;
}
.con_mainnav a{
   background: url(../img/icon/21.png);
   display: inline-block;
   width: 16px;
   height: 16px;
   vertical-align: middle;
}
.con_subnav p{
   height: 30px;
   line-height: 30px;
}
.con_subnav{
   display: none;
}
.header_loginbar a.login,
.header_loginbar a:hover,
.con_mainnav:hover{
   color: #f00;
}

jQuery

$(document).ready(function(){
   // 顶部导航菜单的交互效果
   $('.header_nav_con').hover(function(){
       $(this).has('.con_subnav').css({
           'border': '1px solid #ccc',
           'backgroundColor': '#fff'
       })
       .children('.con_subnav').css('display','block')
       .children('p').hover(function(){
           $(this).css({
               'backgroundColor': '#cdd0d4'
           })
       },function(){
           $(this).css({'backgroundColor': '#fff'})
       })
   },function(){
       $(this).css({
           'border': 'none',
           'backgroundColor': 'transparent'
       })
       .children('.con_subnav').css('display','none');
   })
   // 动态变换箭头颜色
   $('.con_mainnav').hover(function(){
           $(this).children('a').css('background','url(img/icon/24.png)')
       },function(){
           $(this).children('a').css('background','url(img/icon/21.png)')
       })

})