롤오버에서 내비게이션 뒤에있는 div를 표시하는 방법

Question

저는이 웹 코딩 작업을 계속 진행하려고합니다. 주님은 모든 것을 알 수 없다는 것을 알고 있습니다. 그래서 도움이되기를 희망합니다.

은 내가 <nav>를 포함하는 사업부가 있고,의이 탐색은 .... 그 안에 내가 리튬을 기반으로 탐색 강조 뒤에 나타나는 사진을 만드는 방법에 대한 갈 것이라고 어떻게 을 <ul><li>와 년대를 가지고 가정 해 봅시다. 세로 메뉴가 있습니다.

홈 | 갤러리 | 연락처

그리고 이미지를 자유롭게 확장하고 싶습니다. Mario가 롤 오버시 연락처 뒤에 표시됩니다. 나는 그의 머리가 Gallery와 겹치기를 원하지만 그는 Contacts의 뒤편에 있어야한다. 나는이 이미지가 왼쪽으로 가도록하여 탐색에 심하게 간섭하지 않도록하려고합니다. JUST CSS로이 작업을 수행 할 수 있습니까, 아니면 jQuery가 필요합니까?

Answer 1

http://jsfiddle.net/rMCMt/을 찾으십니까?

먼저 자녀와 n 번째 자식 선택기를 사용할 수 있습니다 http://jsfiddle.net/Qq9Nm/

메뉴 항목은 서로 다른 폭을 가지고, 당신은 개별적으로 패딩과 마진을 조정해야합니다. 아래

CSS 코드 :

li 
{ 
    box-shadow: 4px 4px 2px grey; 
    margin: 10px; 
    list-style-type: none; 
    float: left; 
} 
li:first-child:hover, 
li:nth-child(2):hover, 
li:nth-child(3):hover, 
li:nth-child(4):hover, 
li:nth-child(5):hover 
{ 
    background-size: 200px 200px; 
    background-repeat: no-repeat; 
    padding-bottom: 180px; 
    margin-bottom: -170px; 
} 
li:first-child:hover 
{ 
    background-image: url('http://goo.gl/RqQtl'); 
    padding-right: 145px; 
    margin-right: -135px; 
} 
li:nth-child(2):hover 
{ 
    background-image: url('http://goo.gl/TWI0t'); 
    padding-right: 130px; 
    margin-right: -120px; 
} 
li:nth-child(3):hover 
{ 
    background-image: url('http://goo.gl/xRPiq'); 
    padding-right: 115px; 
    margin-right: -105px; 
} 
li:nth-child(4):hover 
{ 
    background-image: url('http://goo.gl/u3Akz'); 
    padding-right: 140px; 
    margin-right: -130px; 
} 
li:nth-child(5):hover 
{ 
    background-image: url('http://goo.gl/Em9Ij'); 
    padding-right: 140px; 
    margin-right: -130px; 
} 

과 HTML : 내가 제대로 이해하면

<nav> 
    <ul> 
     <li> HOME </li> 
     <li> GALLERY </li> 
     <li> CONTACTS </li> 
     <li> EXTRA1 </li> 
     <li> EXTRA2 </li> 
    </ul> 
</nav>