html - 纯 CSS 下拉菜单边框仅在外部

Question

我正在制作一个纯 css 下拉菜单(此处代码:http://jsfiddle.net/SeXyv/7/)，我希望仅在外部而不是元素之间有边框。

我遇到的问题是 js.fiddle 示例中“主题”和“子主题 1”之间的边界。我可以在两者之间一直设置边界，但我只希望它在右上角部分作为轮廓，而不是直接在两个链接之间(金色和灰色相遇的地方)

有人能帮我吗？

谢谢

编辑:这是一张我想要的边框图片，用红色圈出的部分，边框在到达其上方的选项卡后停止: http://tinypic.com/view.php?pic=300ehxt&s=6

Answer 1

基本上你在下拉菜单的最后一个元素上放置一个底部边框，在第一个元素上放置一个顶部边框，然后让触发下拉菜单的元素具有比菜单更高的 z-index，然后将菜单向上推菜单的宽度

#menu li:hover a {/*increace the z-index over that of the menu*/
    ...
    position:relative;
    z-index:5;
}
#menu li:hover li:first-child a{/*first menuitem gets a top border */
    border-top:2px black solid;
}
#menu li:hover li:last-child a{/*last menuitem gets a bottom border */
    border-bottom:2px black solid;
}
#menu li:hover ul{/* move up menu to cover up part of top border*/
    position:relative;
    top:-2px;
}

http://jsfiddle.net/SeXyv/14/