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/

Answer 2

将<li style="z-index: 5"><a href="#" class="bordertest" >Topic</a>添加到您的HTML中。并添加所需的类。

Working fiddle here

调整角落等。

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

2 个答案: