5

我正在制作一个纯 css 下拉菜单（此处的代码：http: //jsfiddle.net/SeXyv/7/），我希望只在外面有一个边框，而不是在项目之间。

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

有谁可以帮我离开这里吗？

谢谢

编辑：这是我想要的边框的图片，用红色圈出的部分，一旦到达上面的标签，边框就会停止： http ://tinypic.com/view.php?pic=300ehxt&s=6

4

2 回答 2

4

基本上，您在下拉菜单中的最后一个元素上放置下边框，在第一个元素上放置上边框，然后让触发下拉菜单的元素具有比菜单更高的 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/

于 2012-06-29T05:49:47.440 回答
0

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

在这里工作小提琴

调整角等。

于 2012-06-29T05:18:57.603 回答