当前位置: 动力学知识库 > 问答 > 编程问答 >

fixed - CSS Z-index for second row of Horizontal Navigation

问题描述:

I have a horizontal navigation bar which I'm playing around with; the idea is fairly simple and certainly not new; hover on the top row and an appropriate sub-menu appears beneath. Both levels are shown horizontally.

What I want to do is have a top-border on the sub-menu which 'loops' above the parent item. So far, I've added a border to the top, left & right of the parent <a> and also a top border to the sub-menu <ul>, but I can't hide the sub-menu top border when it is below the parent item.

I've tried adjusting the margin of the sub-menu to move it up by a pixel (the border width) and then adjust the z-index of the parent in an attempt to place it above, but with no success. Any help would be appreciated, fiddle here.

网友答案:

Your links are stting on the baseline. drop them on bottom or top vertical-align, so the gap underneath goes:

http://jsfiddle.net/XYegy/1/

#menu967>ul>li>a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    display:inline-block;
    vertical-align:bottom;
}
网友答案:

I've managed to achieve what I want using a combination of negative margin and a negative z-index on the sub-menu.

Fiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: