品优购首页导航栏

设计

nav.png

nav盒子通栏有高度，而且有个下边框
全部商品分类可以左侧浮动 - dropdown
右边导航栏组左侧浮动 -navitems

<nav class="nav">
     <div class="w">
       <div class="dropdown"></div>
       <div class="navitems"></div>
     </div>
   </nav>

.nav {
  height: 47px;
  border-bottom: 2px solid #b1191a;
}
.dropdown {
  float: left;
  width: 210px;
  height: 45px;
  background-color: #b1191a;
}
.navitems {
  float: left;
}

dropdown

这里有个不同的地方在于，这是一个hover后有子菜单的地方：

image.png

上面全部商品分类用dt

<div class="dt">全部商品分类</div>

.dropdown .dt {
  width: 100%;
  height: 100%;
  line-height: 45px;
  color: #fff;
  font-size: 16px;
  text-align: center;
}

下面子分类用dd

        <div class="dd">
           <ul>
             <li><a href="#">家用电器</a></li>
             <li><a href="#">手机</a>、 <a href="#">数码</a>、 <a href="#">通信</a></li>
             <li><a href="#">电脑</a>、 <a href="#">办公</a></li>
             <li><a href="#">家居</a>、 <a href="#">家具</a>、 <a href="#">家装</a>、 <a href="#">厨具</a></li>
             <li><a href="#">男装</a>、 <a href="#">女装</a>、 <a href="#">童装</a>、 <a href="#">内衣</a></li>
             <li><a href="#">个户化妆</a>、 <a href="#">清洁用品</a>、 <a href="#">宠物</a></li>
             <li><a href="#">鞋靴</a>、 <a href="#">箱包</a>、 <a href="#">珠宝</a>、 <a href="#">奢侈品</a></li>
             <li><a href="#">运动户外</a>、 <a href="#">钟表</a></li>
             <li><a href="#">汽车</a>、 <a href="#">汽车用品</a></li>
             <li><a href="#">母婴</a>、 <a href="#">玩具乐器</a></li>
             <li><a href="#">食品</a>、 <a href="#">酒类</a>、 <a href="#">生鲜</a>、 <a href="#">特产</a></li>
             <li><a href="#">医药保健</a></li>
             <li><a href="#">图书</a>、 <a href="#">音像</a>、 <a href="#">电子书</a></li>
             <li><a href="#">彩票</a>、 <a href="#">旅行</a>、 <a href="#">充值</a>、 <a href="#">票务</a></li>
             <li><a href="#">理财</a>、 <a href="#">众筹</a>、 <a href="#">白条</a>、 <a href="#">保险</a></li>
           </ul>
         </div>

.dropdown .dd {
  margin-top: 2px;
  width: 100%;
  height: 465px;
  background-color: #c81623;
  color: #fff;
}
.dropdown .dd ul li {
  position: relative;
  height: 31px;
  line-height: 31px;
  margin-left: 2px;
  padding-left: 10px;
}
.dropdown .dd ul li::after {
  position: absolute;
  top: 0px;
  right: 10px;
  content: '\e901';
  font-size: 14px;
  font-family: icomoon;
}

.dropdown .dd ul li:hover {
  background-color: #fff;
}
.dropdown .dd ul li a{
  font-size: 14px;
  color: #fff;
}
.dropdown .dd ul li:hover a,
.dropdown .dd ul li:hover::after {
  color: #c81623;
}

navitems

就是ul li里面包a

<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>
   <li><a href="#">拍卖</a></li>
   <li><a href="#">有趣</a></li>
</ul>

.navitems ul li {
  float: left;
}
.navitems ul li a {
  display: block;
  padding: 0 25px;
  height: 45px;
  line-height: 45px;
}

品优购 首页导航栏

设计

dropdown

navitems

品优购首页导航栏