下拉样式 - 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，为您提供更多样式。

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