Question

我试图创建一个跨越850宽度且位于屏幕中心的子菜单。

子菜单显示菜单链接悬停的时间。

这是html：

<nav class="top-links ">
    <ul id=menu>

    <li><a href="#">aaaaaaa</a></a></li>   
     <li class="dropdown"><a href="#">aaaaaaa</a>
    <div class="dropdown-content">bbbbbb</div></li> 
    <li><a href="#">aaaaaaa</a></a></li>   
    <li><a href="#">aaaaaaa</a></a></li>   
    </ul> 
    </nav>

和Css：

.top-links{position:relative; display:block; float:none; margin:40px auto 0 auto; width:850px;}
.top-links ul li{ float:left;position:relative;}
.top-links ul li:hover > ul{display:block;}
.top-links li > a{display:block;padding:10px 0 16px 0;margin:0 20px;font-size:11px;color:#000; }


.dropdown:hover .dropdown-content { display: block;}
.dropdown-content { display: none; position: absolute; background-color: #fff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; width:850px; left:0; float:left; }

问题是子菜单的起始位置被其父级（已悬停的链接）锁定。

我怎么能忽略这个？所以我可以集中精力吗？

我可以通过给每个子菜单创建自己的类来实现它，但有更简单的方法吗？

Answer 1

尝试从position: relative移除.top-links ul li规则并将其移至ul元素：

.top-links ul li{ 
  float: left;
  // position:relative;
}

.top-links > ul {
  position: relative;
}

/* add calculated value to your left rule for dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
  width: 850px;
  left: calc(50% - 850px / 2 - 16px);
}

absolute元素相对于其最接近的非静态父元素定位。因此，在您的情况下，它是相对于设置为相对的il元素。

中心子菜单忽略其父母的位置？

1 个答案: