仅限外部的纯CSS下拉菜单边框

Question

我正在制作一个纯粹的css下拉菜单(代码在这里:http://jsfiddle.net/SeXyv/7/),我想只在外面有一个边框,而不是在两个项目之间.

我遇到的问题是js.fiddle示例中"topic"和"subtopic 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/