css

/*导航区样式*/

.nav{

height: 50px;

background: #07111b;

overflow: hidden;

}

.nav .nav-side{

margin-left: 620px;

}

.nav .nav-text{

height: 50px;

line-height: 50px;

color: #fff;

float: left;

margin-right: 50px;

cursor: pointer;

}

.nav .nav-text:hover{

color: #f01414;

}

/*banner区*/

.banner{

position: relative;

width: 1200px;

height: auto;

margin: 0 auto;

}

/*左边主菜单样式*/

.banner .menu-content{

position: absolute;

top:-55px;

left:0;

width: 230px;

height: 695px;

background: #f01414;

}

.banner .menu-item{

font-size: 15px;

color: #fff;

height: 45px;

line-height: 45px;

padding:0 20px;

position: relative;

}

.banner .menu-item1{

padding-top: 10px;

background:rgba(0,0,0,0.5);

opacity: 0.8;

}

.banner .menu-item i{

font-style: normal;

position: absolute;

right: 10px;

font-size: 18px;

}

.banner .menu-item:hover{

background: #fff;

color: #f01414;

cursor: pointer;

}

.banner .menu-item1:hover{

background:rgba(0,0,0,0.5);

color: #fff;

opacity: 0.8;

}

/*子菜单栏样式*/

.banner .sub-menu{

width: 700px;

height: 690px;

position: absolute;

top:0

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);;

left:229px;

background: #fff;

border: 1px solid #d9dde1;

overflow: hidden;

z-index: 999;

}

.banner .sub-menu .inner-box{

width: 100%;

height: 100%;

/*display: none;*/

}

.inner-box .sub-row{

font-size: 13px;

margin:40px; 

}

.inner-box .sub-row a{

display: inline-block;

color: #999;

margin:5px;

}

.inner-box .sub-row a:hover{

color: #f01414;

}

.title{

font-weight: bold;

}

.mr10{

color: #999;

margin-right: 5px;

}

.ml10{

margin-left: 10px;

}

.hide{

/*display: none;*/

}

<div class="banner">

<!-- 子菜单 -->

<div class="sub-menu hide" id="sub-menu">

<!-- 家用电器 -->

<div class="inner-box">

<div class="sub-row">

<span class="title">电器</span>

<span class="mr10 ml10">|</span>

<a href="#">手机</a>

<a href="#">对讲机</a>

<a href="#">以旧换新</a>

<a href="#">手机维修</a>

</div>

<div class="sub-row">

<span class="title">冰箱</span>

<span class="mr10 ml10">|</span>

<a href="#">充话费/流量</a>

<a href="#">170选号</a>

<a href="#">合约机</a>

<a href="#">办套餐</a>

<a href="#">选号码</a>

<a href="#">固定宽带</a>

<a href="#">京东通信</a>

<a href="#">中国移动</a>

<a href="#">中国联通</a> 

<a href="#">中国电信</a>

</div>

<div class="sub-row">

<span class="title">洗衣机</span>

<span class="mr10 ml10">|</span>

<a href="#">手机壳</a>

<a href="#">贴膜</a>

<a href="#">手机存储卡</a>

<a href="#">数据线</a>

<a href="#">充电器</a>

<a href="#">手机耳机</a>

<a href="#">创意配件</a>

<a href="#">手机饰品</a>

<a href="#">手机电池</a>

<a href="#">苹果周边</a> 

<a href="#">移动电源</a>

<a href="#">蓝牙耳机</a>

<a href="#">手机支架</a>

<a href="#">车载配件</a>

<a href="#">拍照配件</a>

</div>

<div class="sub-row">

<span class="title">电脑</span>

<span class="mr10 ml10">|</span>

<a href="#">数码相机</a>

<a href="#">单电/微单相机</a>

<a href="#">单反相机</a>

<a href="#">拍立得</a>

<a href="#">运动相机</a>

<a href="#">摄影机</a>

<a href="#">镜头</a>

<a href="#">户外器材</a>

<a href="#">影棚器材</a>

<a href="#">冲印服务</a> 

<a href="#">数码相框</a>

</div>

<div class="sub-row">

<span class="title">微波炉</span>

<span class="mr10 ml10">|</span>

<a href="#">存储卡</a>

<a href="#">三脚架/云台</a>

<a href="#">相机包</a>

<a href="#">滤镜</a>

<a href="#">闪光灯/手柄</a>

<a href="#">相机清洁/贴膜</a>

<a href="#">机身附件</a>

<a href="#">镜头附件</a>

<a href="#">读卡器</a>

<a href="#">支架</a> 

<a href="#">电池/充电器</a>

</div>

<div class="sub-row">

<span class="title">开水壶</span>

<span class="mr10 ml10">|</span>

<a href="#">耳机/耳壶</a>

<a href="#">音箱/音响</a>

<a href="#">闪光灯/手柄</a>

<a href="#">相机包</a>

<a href="#">滤镜得</a>

<a href="#">MP3/MP4</a>

<a href="#">镜头附件</a>

</div>

<div class="sub-row">

<span class="title">吹风机</span>

<span class="mr10 ml10">|</span>

<a href="#">存储卡</a>

<a href="#">三脚架/云台</a>

<a href="#">相机包</a>

<a href="#">滤镜</a>

<a href="#">闪光灯/手柄</a>

<a href="#">相机清洁/贴膜</a>

<a href="#">机身附件</a>

<a href="#">镜头附件</a>

<a href="#">读卡器</a>

<a href="#">支架</a> 

<a href="#">电池/充电器</a>

</div>

<div class="sub-row">

<span class="title">微波炉</span>

<span class="mr10 ml10">|</span>

<a href="#">机身附件</a>

<a href="#">镜头附件</a>

<a href="#">读卡器机</a>

  <a href="#">存储卡</a>

<a href="#">三脚架</a>

<a href="#">电池充电</a>

<a href="#">相机包</a>

</div>

</div>

</div>

</div>

子菜单中分行的时候下一行左边不能和上一行对齐