Html CSS下拉菜单z索引

我正在尝试用photoshop设计一个下拉菜单。但是，此菜单的顶部有一个边框。图像，可以更好地解释它：

使用CSS，我得到的只是一条涵盖更多内容的线。我试着用z-索引位置来制作，但没有成功。看看我的代码：

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;

}

---

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

我给了

.子菜单
a
z-index
一个-1，这就解决了它

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

jsfiddle：

1） 取消注释
子菜单的上边框

2） 注释掉
.menu>li:hover的下边框

3） 给出
。子菜单
css规则
z-index:-1

4） 将
子菜单的
页边距顶部
减小到
9px

实际上，这样做是让顶级菜单项与子菜单项的上边框略微重叠，从而呈现出您想要的外观
，但问题在于子菜单的上边框。看：当我放置z-index:-1时，div容器正在越过子菜单。看：–我能用这个div做什么？我尝试了z-index:-2，但没有成功给出你的菜单类。z-index:100；如果这不能解决您的问题，您将必须提供一个更新的JSFIDLE来显示问题。OK，我正在尝试一些事情，我将更新我在这里得到的东西