* {
    height: auto;
    margin: 0;
    padding: 0;
    font-family: "微软雅黑";
  }
  
  body {
    min-width: 1200px;
  }
  
  li {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  nav {
    background-color: #fff;
    height: 62px;
    line-height: 62px;
    width: 700px;
    position: relative;
    ul {
      padding-left: 50px;
      li {
        display: inline-block;
        padding: 0 20px;
        height: 57px;
        color: #393a3a;
        font-size: 14px;
        cursor: pointer;
        -webkit-transition: color 0.5s ease-in-out;
        -moz-transition: color 0.5s ease-in-out;
        transition: color 0.5s ease-in-out;
        &.move {
          position: absolute;
          width: 30px;
          border-top: 4px solid #E53C3C;
          left: 50px;
          top: 58px;
          -webkit-transition: left 0.4s ease-in-out;
          -moz-transition: left 0.4s ease-in-out;
          transition: left 0.4s ease-in-out;
        }
        &:hover {
          color: #F04C57;
        }
        
        &:nth-child(2):hover~.move {
          left: 136px;
        }
        &:nth-child(3):hover~.move {
          left: 238px;
        }
        &:nth-child(4):hover~.move {
          left: 338px;
        }
        &:nth-child(5):hover~.move {
          left: 438px;
        }
        &:nth-child(6):hover~.move {
          left: 539px;
        }
        a {
          &.login {
            background: url(http://om2b9s612.bkt.clouddn.com/html/task7/icon_user.png) no-repeat left;
            color: #ED8476;
            padding-left: 20px;
          }
        }
      }
    }
  }