2012-05-02 5 views
1

IE7 용으로 내 스타일 시트를 최적화하는 작업이 거의 끝났습니다 (처음 시도한 적이 있습니다).하지만 여전히 한 가지 문제가 있습니다. 드롭 다운 메뉴는 IE8 이상을 포함하여 다른 모든 브라우저에서 완벽하게 작동하지만 IE7에서는 잘못 정렬되었습니다. 어떤 이유로 하위 메뉴가 다음 메뉴 항목 아래에 정렬됩니다. 예를 들어;드롭 다운 메뉴가 IE7에서 잘못 정렬되었습니다.

<div id="main_nav"> 
<ul id="main_nav_list"> 
    <li><a href="#">START</a> 
<ul> 
    <li><a href="#">Contact</a></li> 
    <li><a href="#">Twee</a></li> 
    <li><a href="#">Derde</a></li> 
    <li><a href="#">Laatste</a></li> 
</ul> 
</li> 
    <li><a href="#">LEVEN</a></li> 
    <li><a href="#">MOBILITEIT</a></li> 
    <li><a href="#">VRIJE TIJD</a></li> 
</ul> 
</div> 

그리고 여기 내 CSS (partitial)입니다 : 항목 1의 하위 메뉴 항목 2에 따라 정렬, 항목 2에서 하위 메뉴가 여기에

내 HTML (partitial)의 등의 항목 3에 따라 정렬

#main_nav { 
float:right; 
height:40px; 
margin-left:6px; 
margin-top:90px; 
position:absolute; 
width:780px; 
} 

#main_nav_list li { 
display:inline; 
min-width:100px; 
position:relative; 
text-decoration:none; 
} 

#main_nav_list li a { 
color:#222; 
font-family:Absolut_Pro, Helvetica, sans-serif; 
font-size:1.1em; 
margin-left:5px; 
margin-right:10px; 
text-decoration:none; 
} 

#main_nav_list li a:hover { 
border-bottom:2px solid #db002a; 
color:#db002a; 
} 

#main_nav_list ul { 
background-color:#FFF; 
margin-top:20px; 
padding-top:20px; 
position:absolute; 
width:180px; 
} 

#main_nav_list ul li { 
background-image:url('images/list_bg.png'); 
background-repeat:no-repeat; 
background-position:4% 50%; 
border-bottom:1px dotted #666; 
float:left; 
font-size:0.7em; 
padding-left:15px; 
width:165px; 
} 

#main_nav_list ul a { 
display:block; 
font-family:Arial, Helvetica, sans-serif; 
padding:5px 0; 
} 

#main_nav_list ul a:hover { 
border:none; 
text-decoration:none; 
} 

아이디어가 있으십니까? 사전에

감사

+0

한 가지 위치를 점이다) 속성은 여백이 아니라 ... 항상 기본값이 0이라는 규칙은 아닙니다. –

답변

1

이러한 것들을 추가 : 절대 당신이 왼쪽 상단 사용하는 가정된다 (및/또는 오른쪽 하단 : 내가 처음보기에서 볼 수

#main_nav_list ul { 
margin:0; 
bottom:0; 
left:0 
} 
+0

고마워. 사실, 왼쪽 만 : 0; 필요했습니다 :) – user1128582

관련 문제