Question

我正在为网上商店制作布局，并且遇到了一个看似非常具体的问题。

有一个下拉导航，其设计看起来像是一个带有框的框。关键是，选项卡（第一级菜单项）和盒子（第二级项目）之间有一条1px的边界线，我无法隐藏。

我考虑过为第二级盒子提供比第一级元素更低的z-index，但这并没有改变任何东西。我读了很多关于z-index，它是如何工作以及它是如何工作的，但没有关于一个列表中的z-index。

它应该是这样的，它的外观如何：http://i.stack.imgur.com/xbQ6x.png

我创建了一个codepen，在将第一级项目悬停时显示问题非常好：http://codepen.io/anon/pen/bNqJxN

li .dropdown{
            overflow: hidden;
            position: relative;
            display: inline;
            visibility: hidden;
            position: absolute;
            padding:0;
            margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
            background: #fff;
            border: 1px solid $light-grey;
            width: 280px;
            height: 200px;
            &.right {
                right: -1px;
                left: auto;
            }
            .dropdown-1-2 {
                float: left;
                width: 50%;
            }
        }

Answer 1

我通常用z-index解决这个问题，让li的底部与下拉列表的顶部重叠。

在你的情况下，我必须删除z-index的*选择器，它在li和dropdown之后，在该导航中的所有内容上将z-index重置为2。相反，我创建了一个堆叠上下文（here's an article on it），第一个导航显示在第二个上方，然后我给了ul位置相对和下拉z-index为-1和-1px上边距移动它就在未定位的李的背后。

#mainnav {
    ...

    ul {
        @include reduced-list;
        ...
        position: relative;

        li .dropdown{
            ...
            margin: -1px 0 0 -1px;
            z-index: -1;

            ...

        &#nav1 {
            z-index: 2;
        }
        &#nav2 {
            z-index: 1;
        }

抱歉，codepen没有保存。

Answer 2

你可以解决它添加一个伪元素来覆盖边框

li:hover:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: white;
    bottom: -1px;
    left: 0px;
    z-index: 999;
  }

codepen

Answer 3

非常感谢！

这两个答案都像魅力一样解决了我的问题！

我在这里使用解决方案创建了一个codepen：http://codepen.io/anon/pen/NPpQOq

ul {
        @include reduced-list;
        position: relative; /* YEAH */
        float:right;
        li .dropdown{
            overflow: hidden;
            position: relative;
            display: inline;
            visibility: hidden;
            position: absolute;
            padding:0;
            margin: -1px 0 0 -1px; /* YEAH */
            z-index: -1; /* YEAH */
            background: #fff;
            border: 1px solid $light-grey;
            width: 280px;
            height: 200px;
            &.right {
                right: -1px;
                left: auto;
            }
        }

将嵌套子项置于父元素下似乎是可能的： - ）

CSS和z-index：列表中父元素下的子元素

3 个答案: