수평 목록의 수직 하위 목록 정렬 문제 발생

이미지가 포함 된 드롭 다운 메뉴를 만드는 데 문제가 있습니다. 기본 메뉴 항목과 해당 세로 메뉴가있는 가운데 맞춤 가로 목록을 얻으려고합니다.수평 목록의 수직 하위 목록 정렬 문제 발생

이 내 CSS 코드 코드 :

#nav { 
    position: relative; 
    top: 88px; 
    padding: 0px; 
    border: 0px; 
    min-width: 800px; 
    z-index: 999; 
    font-size: 0px; 
} 

#nav > ul { 
    padding: 0; 
} 

#nav > ul > li { 
    display: inline-block; 
    padding: 0 0 0 0; 
} 

#nav >ul> li> ul { 
    width: 100%; 
    display: none; 
    padding: 0px; 
    margin: 0px; 
    list-style: none; 
} 

#nav> ul >li >ul> li { 
    display: block; 
    padding: 0px; 
}

JQuery와 코드 : 탐색 목록이 들어있는 사업부입니다

$("#nav img").mouseover(function() { 
    //$('ul .subList').hide();    
    var imgSrc = $(this).attr("src"); 
    var tempSrc = imgSrc.split(".png"); 
    var newSrc = tempSrc[0] + "Hover.png"; 
    $(this).attr("src", newSrc); 
    $(this).closest('li').children('ul .subList').slideToggle(); 
});

. 모든 목록 항목은 이미지입니다.

기본 메뉴 항목을 정렬하고 해당 메뉴 아래에 하위 메뉴 항목을 표시하려고하지만 기본 메뉴 항목이 위쪽으로 이동되기를 원합니다.

예 :

해야 한 (원하는)

항목 1 항목 2 Sub1a Sub1b

되다 (전류 출력)

항목 1 Sub1a Sub1b 항목 2

출처

2012-08-31 newbie1985

:-) 반대의 효과 소원을하지 않는 한 이걸로? 이것을 시각화하기가 다소 어려운 :-) –

팁을 주신 Christian에게 감사드립니다. 다음은 jsFiddle입니다. http://jsfiddle.net/rutagupta/PRGhj – newbie1985

아하, 놀랍게도 쉽게 이것을 고칠 수 있습니다. 이것은 CSS에서 일어나는 이상한 기본 작업 중 하나입니다. 으로

당신의 #NAV > UL > LI

추가 : vertical-align: top

당신은 항상 수직 정렬을 추가해야합니다 : 정상은 인라인 블록하는 요소를, 당신이를 만들 수

출처

2012-09-01 08:27:32

고마워요. 그게 효과가있어! – newbie1985

수평 목록의 수직 하위 목록 정렬 문제 발생

답변

관련 문제