그냥 CSS를 사용하여 메뉴 위로 마우스를 가져 가면 div를 표시합니다.

Question

드롭 다운 메뉴를 만들었으며 이제 그 배경과 함께 떨어지는 배경을 원합니다. 여기에 내 코드의 일부는 다음과 같습니다

HTML :

<div id="background"></div> 

CSS :

가 (이 코드에 문제가있는 것을 알고,이 내가로부터 지금까지 집어 것입니다

div#background{ 
height: 150px; 
background-color: white; 
display: none; } 

ul#navmenu li:hover div#background 
{ 
    display: block; 
} 

인터넷 ...) li은 내 메뉴를 구성하는 목록 항목입니다.

<div id="menu"> 
<ul id="navmenu"></ul> 
<div id="background"></div> 
</div> 

UL 메뉴를 포함 내 순서가없는 목록입니다 : HTML 코드에서

는 "배경"디바이더는 내부와 드롭 다운 메뉴를 포함하는 다른 디바이더의 끝입니다.

내가 원하는 것은 메뉴를 배경과 함께 드롭하는 것입니다. 배경은 메뉴 바로 다음에 오는 텍스트를 덮어 야합니다 (위에 표시되어야 함). (메뉴가 텍스트 위에 놓입니다.)

나는 명확하게 조금 만들기 위해 사진을 게시 좋아했을 것이다 그러나 나는 죄송합니다 ... 아직 충분한 명성 포인트가없는

: S

가능하면 난 단지 CSS를 사용하여 작업을 수행하고 싶습니다 , 그러나 나는 또한 다른 솔루션을 열어. 어떤 아이디어?

Answer 1

귀하의 CSS는 CSS

<div id="menu"> 
<ul id="navmenu"><li><div id="background"></div></li></ul> 
</div> 

당신의 HTML의 배경 navmenu의 형제 인의 리튬

이 HTML 코드의 자식입니다.

이 CSS 코드는 네비게이션 메뉴를 가리키면 배경을 표시합니다.

<style> 
div#background{ 
height: 150px; 
background-color: white; 
display: none; } 

ul#navmenu:hover +div#background 
{ 
    display: block; 
} 
</style> 

LI에서 수행하려는 경우 상위의 형제 선택자가 필요합니다. 나는 하나도 갖고 있지 않지만 jQuery가 그 트릭을 할 수있다.

인접한 형제 (+) 연결자는 Internet Explore 7 plus에서 사용할 수 있으며 CSS 2.1 표준입니다.

li 블록 내부가 아닌 다른 곳에 배경을두고 자한다면, 원하는 위치에 상대적으로 위치 시키십시오.