我正在尝试做一个我用 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;
}