중첩 된 드롭 다운 메뉴 정렬

Question

저는 고정 된 너비의 수평 막대에 가변 크기의 메뉴 항목을 고르게 배치하는 방법을 찾은 후 며칠을 보냈으며 결국 here이라는 jquery 솔루션을 발견했습니다. 지금 가지고있는 문제는 중첩 된 드롭 다운 메뉴가 각기 다른 브라우저에서 매우 다르게 나타나고 각각의 li 앵커에서 제대로 드롭 다운해야한다는 것입니다.

This is the site in question

는 지금까지 파이어 폭스에 확인 보인다. Internet Explorer에서 dorp 다운 메뉴가 오른쪽으로 밀려 나고 Safari에서는 왼쪽으로 밀려납니다. 나는 여러 가지 것을 시도했지만, 지금은 나보다 앞서 있다고 생각합니다.

 <nav> 
      <ul id="main-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Products</a> 
        <ul> 
         <li><a href="#">Wood Wool</a></li> 
         <li><a href="#">Wood Wool Bales</a></li> 
         <li><a href="#">Wood Wool Rope</a></li> 
         <li><a href="#">Coloured Wood Wool</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Applications</a> 
        <ul> 
         <li><a href="#">Hamper Packaging</a></li> 
         <li><a href="#">Wine &amp; Champagne</a></li> 
         <li><a href="#">General Gifts</a></li> 
         <li><a href="#">Soaps &amp; Cosmetics</a></li> 
         <li><a href="#">Shellfish Packaging</a></li> 
         <li><a href="#">Stable Bedding</a></li> 
         <li><a href="#">Industrial</a></li> 
         <li><a href="#">Pesticide Alternative</a></li> 
        </ul> 
       </li> 
       <li><a href="#">What's Wood Wool?</a></li> 
       <li><a href="#">The Eco Bit</a></li> 
       <li><a href="#">Get in touch</a></li> 
       <li><a href="#">Blog</a></li> 
      </ul> 
     </nav> 

/* NAVIGATION BAR */ 

header nav{ 
background-image: url(../_images/nav-bar-bg.png); 
height: 48px; 
width: 960px; 
position: absolute; 
top: 96px; 
} 

header nav #main-nav{ 
width:900px; 
margin-left:30px; 
} 

header nav ul li { 
display:block; 
float: left; 
} 

header nav ul li a { 
display:inline-block; 
height:48px; 
line-height:48px; 
text-decoration: none; 
color: white; 
font-weight:normal; 
font-size:16px; 
} 

header nav ul li a:hover { 
color: #09b497; 
text-shadow:2px 2px 2px #000; 
} 


/* NESTED MENU OPTIONS */ 

header nav ul li ul { 
position:absolute; 
float: left; 
visibility: hidden; 
top:40px; 
height:auto; 
border:2px solid #0a7c6c; 
background-color:#FFF; 
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
border-radius: 6px; 
-moz-box-shadow: 0 0 10px #000; 
-webkit-box-shadow: 0 0 10px #000; 
box-shadow: 0 0 10px #000; 
} 

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

header nav ul li ul li { 
display:block; 
height:30px; 
float:left; 
clear:left; 
} 

header nav ul ul li a{ 
padding: 0 12px; 
line-height:30px; 
text-align:left; 
font-size:14px; 
color:#0a7c6c; 
} 

header nav ul ul li a:hover{ 
color: #09b497; 
text-shadow:none; 
} 

Answer 1

이 header nav ul li에 position:relative 추가 : 너무 사이트에 소스를 볼 수 있지만

여기, 관련 HTML & CSS입니다. header nav ul li ul의 위치는 절대로 설정되어 있으므로 부모와 관련하여 절대적이어야합니다.

추가를 잊어 버린 경우 header nav ul li ul 또는 최소 너비까지 너비를 추가해야합니다.