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

問題解決了...

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

實際上，這是在使頂層菜單項與子菜單項頂部邊框的頂部略微重疊，從而提供您正在尋找的外觀

Answer 2

我在這里編輯了你的小提琴：

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

我給.submenu的z-index -1固定了它。

我還更改了顏色，使它們更容易看到。 您將需要將綠色設置為白色，我這樣做是為了看到邊框位於子菜單邊框的頂部