纯CSS下拉菜单-边框覆盖

Question

我正在尝试在菜单和子菜单周围有边框，并将它们包装在一个盒子中。

我正在尝试使用顶部菜单上的白色边框底部来覆盖子菜单上的边框，以使其具有更多的视觉效果。

问题是我没有看到“顶部菜单上的白色底部边框”覆盖了“子菜单中的顶部边框”。我已经给它添加了z-index，但是它没有解决这个问题。

请在http://jsfiddle.net/fjfhan4L/上查看代码

<h2 style="clear:both;">Menu 6 (clean up)</h2>
<nav class="menu-6">
    <ul>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a></li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li style="float:none; clear:both;"></li>
    </ul>
</nav> 

   nav.menu-6 ul{
    list-style:none;
}

nav.menu-6 > ul{
    background-color: yellow;
}

nav.menu-6 a{
    text-decoration: none;
}

nav.menu-6 > ul > li{
    float:left;
    padding-right: 100px;
    display: relative;
}

nav.menu-6 > ul > li > a{
    position: relative;
    display: block;
    z-index: 2;
}

nav.menu-6 > ul > li:hover > a{
    border: solid #000 1px;
    border-bottom: solid #fff 1px;     /* overwrite the sub menu top border */ 
}   

nav.menu-6 ul li > ul{
    display: none;
    position: absolute;
    border: solid #000 1px;
    z-index: 1;
}

nav.menu-6 > ul > li:hover ul{
    display:block;
}  

Answer 1

这应该是可行的：

nav.menu-6 ul li > ul {
display: none;
position: absolute;
border: solid #000 1px;
z-index: 1;
margin-top: -1px; /* this is all you're adding to the css */

}

你只需要在上面的css中添加“above top：-1px”，它就可以解决你的问题了。我没有在多个浏览器上检查它，但它在你提供的小提琴上工作，至少如果我在这个问题中寻找的是正确的话。

Answer 2

使用:before psuedo元素，而不是使用border-bottom覆盖其他边框：

HTML

<h2 style="clear:both;">Menu 6 (clean up)</h2>
    <nav class="menu-6">
        <ul>
            <li><a href="#">Tutorials</a>
                <ul>
                    <li><a href="#">Photoshop</a></li>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">Web Design</a></li>
                </ul>
            </li>
            <li><a href="#">Articles</a>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">User Experience</a></li>
                </ul>
            </li>
        <li style="float:none; clear:both;"></li>
    </ul>
</nav> 

CSS

nav.menu-6 ul{
    list-style:none;
}

nav.menu-6 > ul{
    background-color: yellow;
}

nav.menu-6 a{
    text-decoration: none;
}

nav.menu-6 > ul > li{
    float:left;
    padding-right: 100px;
    display: relative;
}

nav.menu-6 > ul > li > a{
    position: relative;
    display: block;
    z-index: 2;
}

/* Set parent element relative */
nav.menu-6 > ul > li a { position:relative;} 

/* before element */  
nav.menu-6 > ul > li a:after { position:absolute; content:""; width:100%;             height:1px; left:0; bottom:-2px; opacity:0; z-index:9999; background:#fff;}
nav.menu-6 > ul > li:hover a:after { opacity:1;}

nav.menu-6 > ul > li:hover > a{
    border: solid #000 1px;
}   

nav.menu-6 ul li > ul{
    display: none;
    position: absolute;
    border: solid #000 1px;
    z-index: 1;
}

nav.menu-6 > ul > li:hover ul{
    display:block;
}  

查看fiddle：http://jsfiddle.net/ggChris/hebhrd8o/