CSS 하위 메뉴 배경 위로 호버

나 자신을위한 작은 웹 사이트를 만들고 싶습니다. 그래서이 질문을 초보자에게 물어 봅니다. 주 메뉴를 가리키면 하위 메뉴에 다른 배경이 포함될 수 없습니다.CSS 하위 메뉴 배경 위로 호버

HTML :

 <div id="nav"> 
      <ul class="sub1"> 
       <li><a href="#"><h2>Home</h2></a></li> 
       <li><a href="#"><h2>About</h2></a><!---id="onlink"---> 
       <ul class="sub2"> 
        <li><a href="#" title="About Us">Us</a></li> 
        <li><a href="#" title="About Our product">Our product</a></li> 
       </ul> 
       </li> 
      </ul> 
     </div>

CSS :

#nav{ 
width:100%; 
height: 60px; 
padding-top: 20px; 
padding-bottom: 10px; 
} 

#nav ul{ 
margin:0; 
padding:0; 
width: 60%; 
margin: auto; 

} 

#nav ul li{ 
margin:0; 
padding:0; 
list-style: none; 
float:left; 
position:relative; 
background:transparent url(EN/Button_menu_unselected.png); 
} 

#nav ul li ul li{ 
background:aqua; /*Test that doesn't work*/ 
} 

#nav ul li a{ 
text-align:center; 
text-decoration:none; 
height:20px; 
width:100px; 
padding:10px; 
display:block; 
color:#003300; 
} 

#nav ul ul{ 
position:absolute; 
visibility:hidden; 
} 

#nav ul li:hover ul{ 
visibility:visible; 
} 

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
}

항목 드롭 다운은 나에게 아주 나쁜 결과를 제공 "Button_menu_rollover"라는 버튼과 같은 형식을 얻을.

출처

2012-01-30 Trace

먼저'background : red;'시도해보십시오. 나는 아쿠아가 유효한 CSS 색상이라고 생각하지 않는다. – Mike

그것은 전에 사용했는데 자동으로 나타난다. (코다를 사용하고있다.) – Trace

작품 ... 죄송합니다 – Mike

코드 :

#nav ul li:hover a{ 
background-image: url(EN/Button_menu_rollover.png); 
}

모든 요소와 하부 요소에 적용된다.

이 그것을 수정하지만이 코드는 IE6에서 작동하지 않습니다

#nav ul li:hover > a{ 
background: #fff; 
}

또는 당신은 정확한 결과를 얻을 수 띄운 효과를 자바 스크립트를 사용할 수 있습니다.

출처

2012-01-30 08:40:13

아, 작은 화살표가있는 곳입니다 :-) 많은 감사와 인터넷 익스플로러 6에 대한 나쁘다! 나중에 디자인을 개선 할 계획이므로 나중에 다시 살펴 보겠습니다. – Trace

CSS 하위 메뉴 배경 위로 호버

답변

관련 문제