Question

我尝试在菜单和子菜单周围设置边框，然后将它们包装在一个盒子里。

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

问题是我没有在顶部菜单上看到＆＃34;白色底部边框＆＃34;覆盖＆＃34;子菜单中的顶部边框＆＃34;。我已经添加了z-index，但它没有解决问题。

<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 */

}

你只需要添加＆＃34; margin-top：-1px＆＃34;到上面的CSS，它应该解决你的问题。我没有在多个浏览器上查看它，但它对你提供的小提琴起作用，至少如果我在你正在寻找的问题中更正。

Answer 2

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

<强> 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;
}

查看小提琴：http://jsfiddle.net/ggChris/hebhrd8o/

纯CSS下拉菜单 - 边框覆盖

2 个答案: