夜雨&(* 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 C语言快速排序函数纠错
    • ¥15 C#的一个应用程序书写
    • ¥65 页面调接口时加载卡住不响应
    • ¥35 用C语言解决编程问题
    • ¥15 unity硬件连接与使用
    • ¥15 鱼缸加热棒的数据分析或者实际案例也行
    • ¥15 postgresql11安装完成后,pgadmin无法启动
    • ¥15 (标签-无人机|关键词-Matlab代码)
    • ¥15 执行shell脚本提示参数太多
    • ¥15 困扰好久了,电脑的串口调试助手向单片机发送一个字符(如:字符‘1’到‘8’),单片机点亮对应的灯(如发送字符‘2’则点亮第2个灯)并给电脑回复信息:已点亮第x个灯(其中 x 要替换成对应的数字)