夜雨&(* 2022-01-17 17:32 采纳率: 88.9%
浏览 47
已结题

为什么盖不住下拉菜单

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

img


```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>


```

  • 写回答

1条回答 默认 最新

  • 你好!机器人 2022-01-17 17:40
    关注

    你要给a标签加定位

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 1月25日
  • 已采纳回答 1月17日
  • 创建了问题 1月17日

悬赏问题

  • ¥15 ansys fluent计算闪退
  • ¥15 有关wireshark抓包的问题
  • ¥15 Ubuntu20.04无法连接GitHub
  • ¥15 需要写计算过程,不要写代码,求解答,数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil,写代码解决两个问题,用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥30 C++行情软件的tick数据如何高效的合成K线