纯CSS下拉菜单仅在外部绘制边框

Question

纯CSS下拉菜单仅在外部绘制边框

htmlcssborderdrop-down-menu

5

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

我遇到的问题是“主题”和“子主题1”之间的边框在js.fiddle示例中。我可以在两者之间获得完整的边框，但我只想要它在顶部右侧部分作为轮廓线，而不是直接在两个链接之间（金色和灰色相遇的地方）。

有人可以帮助我吗？

谢谢

编辑：这里是我想要的边框的图片，用红色圈出来，当它达到上面的选项卡时停止： http://tinypic.com/view.php?pic=300ehxt&s=6

- user1490248

1

你知道可以使用display: "none";和display: "block"来显示和隐藏菜单，而不是将其移动到窗口外的-9999px吗？ - jao

1

@jao：但是屏幕阅读器将无法读取隐藏菜单。 - Madara's Ghost

@Truth：我不知道这个。我猜每天都会学到新东西。 - jao

你需要有一个顶部边框。但是要以这样的方式使用z-index，使得子菜单在标题下方滑动。 - Robin Maben

首先，阅读此链接：https://dev59.com/82sz5IYBdhLWcg3wZ25q#7923077 - Madara's Ghost

2个回答

0

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

这里有一个可工作的示例

调整角落等。

- xan

你明白他想问什么了吗？完全误解了。 - Ahsan Rathod

我猜他只想给“主题”应用边框，而不是“子主题”。 - xan

Ecko，那不是我需要的，我不需要在主题底部有边框。我只想在子主题1的右上方空间上有一个边框，当它到达主题时停止，请参见此图片：http://tinypic.com/view.php?pic=300ehxt&s=6 我想要用红色圈出来的部分。感谢您的帮助。 - user1490248

好的，我没理解问题。:( - xan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Musa · Accepted Answer

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