为什么盖不住下拉菜单

我给location设置了相对定位，并且指定了z-index，那它不应该盖住下拉菜单吗？但为什么没盖住？


```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/fa/css/all.css" />
    <style>
      header::before,
      header::after {
        content: "";
        clear: both;
        display: table;
      }
      header {
        font-size: 12px;
        color: #999;
        line-height: 30px;
        height:30px;
        border-bottom: #ddd solid 1px;
        background-color: #e3e4e5;
      }
      .inner-wrapper {
        width: 1190px;
        margin: 0 auto;

      }
      .location {
        float: left;
       padding:0 10px;
       position:relative;
       padding-bottom:1px;
       z-index: 10;

      }
      .location:hover{
          background-color: white;
          border:1px solid #999;
          border-bottom:none;
     }
      .pull-down-list{
          height:433px;
          width:302px;
          background-color: white;
          display: none;
          border:solid #999 1px;
          position:absolute;
          left:-1px;
          top:29px;
          box-shadow:0 0 2px rgba(0,0,0,.2)
      }
      .location:hover > .pull-down-list{
          display:block;
      }
      ul {
        float: right;
      }
      ul li {
        float: left;
        color: #999;
        text-decoration: none;
      }
      a {
        color: #999;
        text-decoration: none;
      }
      a:hover {
        color: red;
      }
      .fa-map-marker-alt {
        color: red;
      }
      .cutting-line {
        height: 10px;
        width: 1px;
        background-color: #ccc;
        float: left;
        margin: 10px 12px;
      }
      #last{
          margin-right:50px;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="inner-wrapper">
        <div class="location">
          <a href="javascript:;">
            <i class="fas fa-map-marker-alt" style="font-size: 14px"></i>广东
          </a>
          <div class="pull-down-list"></div>
        </div>
        
        <ul>
          <li><a href="javascript:;">你好，请登录</a></li>
          <li class="cutting-line"></li>

          <li>
            <a href="javascript:;" style="color: red">免费注册</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;">我的订单</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;"
              >我的京东<i class="fas fa-angle-down"></i>
            </a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;">京东会员</a>
            <li class="cutting-line"></li>
        </li>
          <li>
            <a href="javascript:;" style="color: red"
              >政企采购<i class="fas fa-angle-down"></i>
            </a>
        </li>
            <li class="cutting-line"></li>
            <li>客户服务<i class="fas fa-angle-down"></i></li>
            <li class="cutting-line"></li>
            <li>网站导航<i class="fas fa-angle-down"></i></li>
            <li class="cutting-line"></li>
          <li>手机京东</li>
          <li class="cutting-line"></li>
          <li>
            <a id="last" href="javascript:;">网站无障碍</a>
          </li>
        </ul>
      </div>
    </header>
  </body>
</html>