IE7에서 드롭 다운 메뉴 항목의 배경색 너비를 설정하는 방법은 무엇입니까?

Question

나는 다음 탐색 모음이 있습니다 http://jsfiddle.net/jajq3/embedded/result/ 후손을 위해

,이 구조입니다 :

<div id="navBar"> 
    <ul style="float: left; padding-left: 5px;"> 
     <li> 
      <a href="#">A</a> 
     </li> 
     <li> 
      <a href="#">B</a> 
     </li> 
     <li> 
      <a href="#">C</a> 
      <ul> 
       <li><a href="#">This is a thing.</a></li> 
       <li><a href="#">Cool man</a></li> 
       <li><a href="#">Linus</a></li> 
      </ul> 
     </li> 
     <li> 
      <a href="#">D</a> 
      <ul> 
       <li><a href="#">Gerg.</a></li> 
       <li><a href="#">Weeeeeeeeeeeeeeeeeeeeee</a></li> 
       <li><a href="#">asdf idiot</a></li> 
       <li><a href="#">blah</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

당신이 드롭 다운 메뉴 링크 위에 마우스를 올려 때, 링크 변경 뒤의 배경 색상을 볼 수 있습니다로 . 그러나 IE7에서는 배경이 드롭 다운 메뉴의 가장자리까지 확장되지 않습니다. 그것은 단지 링크 텍스트의 가장자리로 이동합니다. 현대의 브라우저에서는 이것이 관찰되지 않습니다. 그러면 IE7에서 어떻게 작동합니까?

답하기 전에 드롭 다운 메뉴의 너비를 명시 적으로 설정하고 싶지는 않습니다. 현재 드롭 다운 메뉴 링크는 드롭 다운 메뉴의 넓이를 지정하며 이것이 내가 원하는 방식입니다. (예를 들어, D의 드롭 다운 메뉴는 C보다 더 커야합니다. Weeeeeeeeee 링크가 길기 때문에)

Answer 1

당신은 #navBar > ul > li > ul > li에 설정된 스타일을 제거하고 단지 목록 항목은 목록 항목하자 받아야합니다. 그런 다음 그들은 자동으로 ul을 포함하는만큼 넓습니다. 당신이 li 대신에 a에 :hover에 background-color을 설정하면

는 다음, background-color 메뉴의 전체 폭을 채 웁니다.

여기에 IE7에서 작동하는 jsFiddle embedded result link입니다.

는 CSS의이 비트를 제거하십시오 :

#navBar > ul > li > ul > li { width: 100%; clear: left; display: block; }

그리고 두 부분으로 CSS의 하단에있는 클래스를 분할 :

#navBar > ul > li:hover > ul > li:hover 
{ 
    background-color: #999; 
} 
#navBar > ul > li:hover > ul > li:hover > a 
{ 
    color: white; 
} 

Answer 2

프로젝트에 사용자 정의 IE7 스타일 시트를 추가하고 특수 패딩을 추가해야합니다.

<!-- [if IE 7]> 
<style rel="text/css"> 
    myMenu li { 

    padding-left: 10px; 
    padding-right: 10px; 
    } 
</style> 
<![endif]-->