jQuery에서 왜 이렇게 정렬되지 않았습니까?

Question

플라이 아웃 메뉴를 클라이언트에 빠르게 입력해야했습니다. JS 또는 JS 스타일을 정확히 원하는 방식으로 스타일을 지정 했으므로 CSS 또는 HTML을 엉망으로 만들고 싶지 않았습니다. 단지 JS를 추가하기를 원합니다. 나는 방금 <ul> 내부를 절대 위치로 설정하고 상위 오프셋을 부모 상단 인 <li>으로 설정하는 것이 간단하다고 생각했지만 전혀 작동하지 않습니다. 근처에도 안. 배너 스탠드 왼쪽 사이드 바 메뉴 항목과 트러스 표시를 통해 http://www.nwcidisplays.com/_temp/

호버 : 여기

$(function(){  
    $('#snav-links > li > ul').css({ 
     display:'none', 
     position:'absolute', 
     background:'#00182E', 
     left:$('#snav-links').width()+'px' 
    }) 
    .parent().hover(
     function(){ 
      $(this).find('ul').css({display:'block',top:$(this).offset().top+'px'}) 
     }, 
     function(){ 
      $(this).find('ul').css({display:'none'}) 
     } 
    ); 
}); 

는 페이지입니다. 그것이 어땠는지 알게 될 것입니다. 그것을 고치는 법을 모르겠다. 아이디어?

Answer 1

(나는 당신의 메뉴처럼 보이는 방법을 잘 모르겠어요). 그들은 떠 다니고 li 요소가있는 공간을 차지하지 않습니다. 이것은 li 요소의 높이가 최소가되도록하며 실제 링크 위에 배치됩니다.

플로트를 제거하고 부모를 상대 위치로 설정하면 그 값은 http://jsfiddle.net/rEVwd/6/입니다.

최종 결과가 이전과 같아 지도록 li 요소의 여백 또는 패딩을 조정해야합니다.

Answer 2

# snav-links> li 요소의 위치를 ​​상대적으로 설정하면 중첩 된 절대 ul은 해당 컨테이너를 기준으로합니다.

ul에 대한 (상단 0, 좌측 0)은 LI의 상단 모서리가됩니다.

$('#snav-links > li').css({ 
      position:'relative', // magic here 
     }.find(' > ul').css({ 
      display:'none', 
      position:'absolute', 
     background:'#00182E', 
     top:0, 
      left:$('#snav-links').width()+'px' 
     }).end() // end() will take to back to the last selector (ie. $('#snav-links > li')) 
     .hover(
      function(){ 
       $(this).find('ul').css({display:'block'}) 
      }, 
      function(){ 
       $(this).find('ul').css({display:'none'}) 
      } 
     ); 

당신은 다음 상단을 조정해야 할 수도 있습니다 및 해당 메뉴의 크기를 기준으로 왼쪽 당신이 문제의 원인은 #snav-links > li 내에서 앵커입니다

Answer 3

FireBug를 검사하는 경우 상위 li이 버튼 위에 상당히 위치합니다. (Aleksi는 떠 다니는 요소이기 때문에) (버튼은 a.slink으로 표시됩니다. 부모의 li이 위에 위치 함) li의 오프셋을 검색하면 그 위치가 표시됩니다.

a.slink 대신 원하는 위치에 넣어 사용해보세요. 또한

, 여기에 답변자가 답변을하는 데 도움이 바이올린은 년대는 바로 옆에있는 버튼을 왼쪽, 당신은 오프셋 + 폭 #snav-links

$(function(){  
    $('#snav-links > li > ul').css({ 
     display:'none', 
     position:'absolute', 
     background:'#00182E', 
     left:$('#snav-links').offset().left + $('#snav-links').outerWidth()+'px' 
    }) 
    .parent().hover(
     function(){ 
      $(this).find('ul').css({display:'block',top:$(this).find('a').offset().top+'px'}) 
     }, 
     function(){ 
      $(this).find('ul').css({display:'none'}) 
     } 
    ); 
});