CSS下拉菜單z-index

Question

我正在嘗試使用photoshop設計的下拉菜單。但是，此菜單的頂部有一個邊框。圖像，可以更好地解釋它：

使用CSS，我得到的是覆蓋更多的，它被設計成一條線。我嘗試使用z-index位置來製作，但沒有成功。看看我的代碼：

nav{ 

    display: inline; 
    font-weight:900; 
    text-transform:uppercase; 
    font-size:13px; 
    margin-left:95px; 
} 
.menu > li > a { 

    width:auto; 
    padding:10px 20px 10px 10px; 
    background-image:url('img/seta_menu.png'); 
    background-repeat:no-repeat; 
    background-position:right 50%; 
} 

.menu>li{ 

    width:auto; 
    margin-right:45px; 
    padding:10px; 
    border-left: solid 1px #F8FAFA; 
    border-right: solid 1px #F8FAFA; 
    border-top:solid 1px #F8FAFA; 
    border-bottom:solid 1px #F8FAFA; 
} 

.menu>li:hover{ 

    border-left: solid 1px #bdc9c5; 
    border-right: solid 1px #bdc9c5; 
    border-top:solid 1px #bdc9c5; 
    border-bottom:solid 1px #bdc9c5; 
    background-color:white; 

} 

nav>div{ 

    display:inline; 

} 
nav>div>ul{ 

    display: inline; 

} 
.menu li{ 
    display: inline-table; 
} 
.menu>li:hover >ul{ 

    display:block; 

} 
.sub-menu{ 

    position:absolute; 
    display:none; 
    padding:10px; 
    margin-left:-11px; 
    margin-top:10px; 
    border-left: solid 1px #bdc9c5; 
    border-right: solid 1px #bdc9c5; 
    border-bottom:solid 1px #bdc9c5; 
    /*border-top:solid 1px #bdc9c5;*/ 
    background-color:white; 

} 

.sub-menu ol, ul { 

    padding:0px; 
    margin:0px; 

} 
.sub-menu > li{ 

    display:block; 

} 

http://jsfiddle.net/btgfE/

Answer 1

我已經在這裏編輯您的提琴：

http://jsfiddle.net/btgfE/4/

我給.submenu -1 z-index，這個固定。

我也改變了顏色，讓它們更容易看見。您將要設置的綠白色，我這樣做，這樣你可以看到邊框是在子菜單的邊框

Answer 2

問題解決了上面......

的jsfiddle：http://jsfiddle.net/btgfE/2/

1）取消對.sub-menu

2）的頂邊界註釋的.menu>li:hover

3底部邊界）得到.sub-menu的CSS規則z-index:-1;

4）減少.sub-menu的margin-top到9px

真的該做的是讓頂級菜單項什麼ontop的子菜單項上邊框稍微重疊，給人的外觀你正在尋找