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;

}

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）将margin-top的{​​{1}}减少到.sub-menu

真正做的是让顶级菜单项稍微重叠在子菜单项的顶部边框上，给出你想要的外观

Answer 2

我在这里编辑了你的小提琴：

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

我给了.submenu一个z-index -1，这就修好了。

我也改变了颜色，使它们更容易被看见。您需要将绿色设置为白色，我这样做是为了让您可以看到边框位于子菜单边框的顶部