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