京东下拉框边框隐藏问题

不知道大家在写京东导航栏的时候，有没有遇到这样一个问题。

在hover一个块元素时，块元素的下边框总是盖不住hover触发的下拉框的border-top，可事实就是要求我们两个交汇的那个边框是看不见的。

我们的HTML结构如下：

                    <li class="prl">
                        <div class="all">
                            <a href="#">我的京东</a>
                            <i class="iconfont">&#xe63b;</i>
                        </div>
                        <div class="myJD-downbox"></div>
                    </li> 

其实思路很简单，就是给hover的那个块元素的padding-bottom加一个像素，且下边框设置成背景色，让hover的块元素层级比下拉框高，hover时，块元素比原先height+1，背景颜色相同，自然就可以盖住下拉框的border了。可是我纠结这个很久！

/* 我的京东下拉框部分 */
.top-nav .prl{
    position: relative;
}
.top-nav .prl .myJD-downbox{
    display: none;
    width: 280px;
    height: 165px;
    background-color: white;
    border: 1px solid rgb(204,204,204);
    box-shadow: 2px 2px 6px rgb(204,204,204); 
    position: absolute;
}
.top-nav .prl>.all:hover+.myJD-downbox{
    display: block;
    top: 29px;
    left: 7px;
} 

/*块元素*/
.top-nav .prl .all{    
    width: 77px;
    height: 28px;    
    border: 1px solid #e3e4e5;
}
.top-nav .prl:hover>.all{
    background-color: white;
    padding-bottom: 1px; 
    border: 1px solid rgb(204,204,204);
    border-bottom-color: white;
    position: relative；      
    z-index: 10;
}

我一直都没有做出来的原因也很low，可能是因为我的基础不扎实吧，我并不清楚，父元素的层级再高，也盖不住子元素，且只有设置定位，都会有层级；所以我一个劲儿的给父元素加层级，企图它增加一1px的内边距可以盖住下拉框的上边框，真的是在做可笑的无用功啊~

希望今天分享的，可以帮助到大家~