我正在制作一个纯粹的css下拉菜单(代码在这里：http://jsfiddle.net/SeXyv/7/),我想只在外面有一个边框,而不是在项目之间.
我遇到的问题是js.fiddle示例中“topic”和“subtopic 1”之间的边界.我可以在两者之间获得一个边界,但我只希望它在右上角部分作为轮廓,而不是直接在两个链接之间(金色和灰色相遇的地方)
有人可以帮我从这里出去吗？
谢谢
编辑：这是我想要的边框的图片,部分用红色圈出,一旦到达上面的标签,边框停止：
http://tinypic.com/view.php?pic=300ehxt&s=6
最佳答案
基本上你在下拉菜单的最后一个元素和第一个元素的顶部边框上放置一个底部边框,然后让触发下拉菜单的元素具有比菜单更高的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;
}
