品优购 首页导航栏

设计

nav.png

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

.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

全部商品分类

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

• 下面子分类用dd

        

           

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

.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

   
服装城
   
美妆馆
   
传智超市
   
全球购
   
闪购
   
团购
   
拍卖
   
有趣

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