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

任何人都知道如何编写这种风格的代码。我尝试了一个背景顶部图像和其余的边框，并尝试使用z索引（在父导航下下拉），但很快就会变得非常混乱。我正在寻找一种干净的方式来用CSS编码，任何想法都会非常有用。谢谢

像这样的事

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

技术
#技术：悬停{
边框顶部：1px纯蓝色；
左边框：1px纯蓝色；
右边框：1px纯蓝色；
}
#下拉列表{
边框：1px纯蓝色；
}

我会用一些

绝对定位、
边框和
：悬停来实现这一点

示例HTML：

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

​
这是一个为您提供的具有更多样式的解决方案。
这只是解决方案的一半。这不起作用，因为左上角边框缺失。
.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;
}