2011-02-02 2 views
2

나는 수평 드롭 다운 메뉴를 만들고 있었고 항목 아래에 각 드롭 다운 메뉴를 배치했을 때 멋지게 까다 롭다. 왼쪽 : 0; 위치에 필요합니까?

#nav { float:right; } 
    #nav li { display:inline;position:relative; } 
    #nav li ul { display:none; } 
     #nav li ul.current { position:absolute; display:block; z-index:9; left:0; } 
     #nav li ul.current li { display:block; } 

그리고

<ul id="nav"> 
    <li><a href="#">link</a> 
    <ul> 
     <li><a href="#">sub</a></li> 
    </ul> 
    </li> 
    <li><a href="#">link</a> 
    <ul> 
     <li><a href="#">sub</a></li> 
    </ul> 
    </li> 
</ul> 

의 메뉴 구조와 일부 JS는

$(document).click(function(e) { 
    if($(e.target).is("#nav li a")) { 
    $("#nav li ul.current").removeClass("current"); 
    $(e.target).parent().find("ul").addClass("current"); 
    } else { 
    $("#nav li ul.current").removeClass("current"); 
    } 
}); 

메뉴는이 코드와 함께 작동 작동하도록하지만 내 질문은 :

왜 왼쪽 : 0; #nav li ul.current에서 하위 메뉴를 올바르게 배치해야합니까?

왼쪽 없음 : 0; 크롬에서만 작동합니다. Opera, FF 및 IE8은 모두 #nav ul 시작 위치에 하위 메뉴를 렌더링합니다.

나는 절대적으로 배치 된 요소가 static이 아닌 가장 가까운 부모 요소로 갔다고 생각했습니다. #nav가 아닌 #nav li이 될 것입니다.

답변

1

left is autoauto의 기본값은 브라우저가 당신이 CSS 엔진을 작성하지 않는 한 various rules that you probably shouldn't care about를 사용하여 자신의 위치를 ​​파악한다는 것을 의미 ...이 이유가 될한다고 생각합니다. 다른 브라우저가 버그 나 오해가 없어도 다른 결과를 얻을 수있는 충분한 흔들림 공간이 있습니다.

위치 오프셋은 가장 가까운 비 정적 조상 (사용자의 <li>)을 기준으로하지만 오프셋이 0임을 의미하지 않으며 지정하지 않으면 left은 여전히 ​​계산 된 값입니다. 음수 값일 수 있습니다.

기본적으로 : 당신이 말하는 것을 말하십시오. left:0을 의미하므로 그렇게 말하십시오.

-1

Becoz : 위치를 언급 할 때 절대 값, 일부 브라우저는 기본 설정 즉 왼쪽 : 0px를 인식하지만 다른 브라우저에서는 기본 설정을 이해하지 못할 수도 있습니다.

나는

관련 문제