夜雨&(* 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日

悬赏问题

  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 (希望可以解决问题)ma和mb文件无法正常打开,打开后是空白,但是有正常内存占用,但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥15 绘制多分类任务的roc曲线时只画出了一类的roc,其它的auc显示为nan
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝
  • ¥20 腾讯企业邮箱邮件可以恢复么
  • ¥15 有人知道怎么将自己的迁移策略布到edgecloudsim上使用吗?
  • ¥15 错误 LNK2001 无法解析的外部符号
  • ¥50 安装pyaudiokits失败
  • ¥15 计组这些题应该咋做呀
  • ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?