css - 下拉样式 - CSS（整个区域的边框）

Question

任何人都知道如何编写这种类型的样式。我尝试了背景顶部图像和其余部分的边框，并尝试使用 z-index（父导航下的下拉菜单），但这很快就变得非常混乱。我正在寻找一种在 CSS 中编码的干净方式，任何想法都会非常有帮助。谢谢！

Answer 1

我会通过一些absolute定位来做到这一点，border并且:hover.

示例 HTML：

<div class="top">
    Technology
    <div>
        Extra options
    </div>
</div>​

示例 CSS：

.top {
    background: grey;
    border: 1px solid purple;
    position: relative;
}

.top > div {
    background: grey;
    border: 1px solid purple;
    position: absolute;
    left: -1px; /* or whatever works for your layout */
    top: 28px; /* or whatever works for your layout */
    z-index: -1;
    display: none;
}

.top:hover {
    border-bottom: 0;
}

.top:hover > div {
    display: block;
}

​这里有一些更多样式的小提琴。

Answer 2

像这样的东西？

<div id="technology">Technology</div>

#technology:hover {
border-top:1px solid blue;
border-left:1px solid blue;
border-right:1px solid blue;
}

#dropdown {
border:1px solid blue;
}