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;
}

这是一个fiddle为您提供更多样式。