nav 导航栏

nav 导航栏

3.1dropdown 下拉

布局思路

1.上面 全部商品分类 和下面列表应该在一个dropdown div里面 宽度一样 命名：上面dt 下面dd
2.下拉菜单用列表 ul>li 来做 大盒子dd给定宽高背景 红色
3.li设置左margin：2px 里面文字有一定距离 pdding-left：10px 文字居中
4.hover做法 碰到li变色
5.后面箭头用after做

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

小li做法

1.marfin-left 2px 为了点以后左边留红 美观

.dropdown .dd ul li {
    position: relative;
    margin-left: 2px;
    height: 31px;
    line-height: 31px;
    padding-left: 10px;
    color: #fff;
}复制

箭头做法 伪元素

1、用绝对定位 absolute
2.相对于父亲是li li加相对定位relarive

.dropdown .dd ul li::after {
  position: absolute;
  top: 1px;
  right: 10px;
  font-family: 'icomoon';
  content: '\e920';
  font-size: 14px;
}复制

3.2navitems

做法思路： 为了增大链接选项

1.设置ul 左浮动

2.ul里放a a为行内元素 给a转为inline-block 给padding撑开a的范围（左右距离各一半25） 用户鼠标放在盒子上有链接

.navitems ul li a {
    display: block;
    padding: 0 25px;
    line-height: 45px;
    font-size: 16px;
    font-weight: 500;
}复制