드롭 다운 스타일 - 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; 
}