html - CSS 下拉菜单 z-index

Question

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

使用 CSS，我得到的只是一行，它涵盖了它设计的更多内容。我尝试使用 z-index position 来制作，但没有成功。看看我的代码:

导航{

    显示:内联；
    字体粗细:900；
    文本转换:大写；
    字体大小:13px；
    左边距:95px；
}
.menu > li > a {

    宽度:自动；
    填充:10px 20px 10px 10px；
    背景图像:url('img/seta_menu.png');
    背景重复:不重复；
    背景位置:右 50%；
}

.menu>li{

    宽度:自动；
    右边距:45px；
    填充:10px；
    左边框:实心 1px #F8FAFA；
    border-right: solid 1px #F8FAFA;
    border-top:solid 1px #F8FAFA;
    border-bottom:solid 1px #F8FAFA;
}

.menu>li:悬停{

    左边框:实心 1px #bdc9c5；
    border-right: solid 1px #bdc9c5;
    border-top:solid 1px #bdc9c5;
    border-bottom:solid 1px #bdc9c5;
    背景颜色:白色；

}

导航>分区{

    显示:内联；

}
导航>div>ul{

    显示:内联；

}
.菜单里{
    显示:内联表；
}
.menu>li:悬停>ul{

    显示: block ；

}
.子菜单{

    position:absolute；
    显示:无；
    填充:10px；
    左边距:-11px；
    边距顶部:10px；
    左边框:实心 1px #bdc9c5；
    border-right: solid 1px #bdc9c5;
    border-bottom:solid 1px #bdc9c5;
   /*border-top:solid 1px #bdc9c5;*/
    背景颜色:白色；

}

.sub-menu ol, ul {

    填充:0px；
    边距:0px；

}
.sub-menu > li{

    显示: 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

真正的做法是让顶级菜单项稍微重叠在子菜单项的顶部边框之上，给出您正在寻找的外观