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

}

你只需要添加 「的margin-top：-1px」 上面的CSS它應該解決你的問題。我沒有在多個瀏覽器上檢查它，但是它在你提供的小提琴上工作，至少如果我在這個問題中找到了正確的東西。

Answer 2

而不是使用border-bottom覆蓋其他邊境使用:before僞元素：

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/