왼쪽 아래로 놓기 위치 지정

Question

3 - 타이어 드롭 다운 메뉴를 만들려고합니다. 상위 메뉴의 왼쪽에 세 번째 수준의 하위 메뉴를 배치하려고하지만 최상위 위치가 제대로 정렬되지 않습니다.

아래 화면은 내가 얻은 결과입니다.

CSS 코드 :

/* the menu_new_new is the list, you don't need a wrapping div */ 
#menu_new{ 
    Text-Align: Left; 
    /*width:100%;*/ 
    background:#194eb1; 
    /* height:30px;*/ 
} 

/* only mainmenu_new listitems */ 
#menu_new > li{ 
    display:inline-block; 
    position:relative; 
    line-height:35px; 
} 

/* links in mainmenu_new and both submenu_news */ 
#menu_new a{ 
    display:block; 
    text-decoration:none; 
    padding:0px 10px; 
    color:#fff; 
    text-align:Left; 
} 

/* submenu_news of both levels */ 
#menu_new li ul{ 
    position: absolute; 
    top: 35px; 
    left:0; 
    min-width:150px; 
    background: #194eb1; 
    Text-Align: Left; 


} 
/* submenu text */ 
#menu_new li ul li{ 

    Text-Align: Left; 
    line-height:20px; 
    List-style-type:none; 
    border: 1px solid white; 
} 
/* move the second level submenu_new to the right to don't overlap the parent submenu_new */ 
#menu_new ul ul{ 
    position: absolute; 
    top:auto; 
    left:150px; 
    Z-index: 10; 

} 

/* hover effect for submenu_new links */ 
#menu_new li li a:hover{ 
    background:rgba(255,255,255,0.5); 
} 

/* hide all submenu_news for default */ 
#menu_new li ul{ 
    display: none; 
} 

/* show a submenu_new if the direct parent listitem is hovered */ 
#menu_new li:hover > ul{ 
    display:block; 
} 

어떻게 부모 메뉴의 위치로 정상의 위치를 ​​정확히 정렬?

샘플 코드는 http://jsfiddle.net/asovbLqd/?

Answer 1

는 Chk 장치의 URL이 enter link description here

#menu_new ul ul{ 
    top:0px; 
} 
#menu_new li ul li{ 
    position:relative; 
} 

Answer 2

편집 : 또한 #menu_new li ul li에 position: relative를 추가해야합니다.

#menu_new ul ul의 경우 top: auto 대신 top: 0을 사용하십시오.

Answer 3

모든 하위 메뉴의 최고를 해결하려면하십시오, 당신은

"부모 요소에 postion:relative"를 제공하기 위해 그리고 당신이하는 것입니다 필요 왼쪽 여분의 공간을 수정해야 "<ul>"태그 여기

에서 기본 패딩을 제거하는 것은 "최고의 위치와 왼쪽 포지를 해결 둘 다 문제와 바이올린입니다 기는 "하위 메뉴 <ul>

#menu_new li ul li { 
    Text-Align: Left; 
    line-height:20px; 
    List-style-type:none; 
    border: 1px solid white; 
    position: relative; 
} 

의 부모 요소에

추가 position: relative;을 그리고 <ul>에서 패딩과 마진을 제거 :

http://jsfiddle.net/asovbLqd/14/

난 그냥 아래의 변경 태그 #menu_new ul ul { 위치 : 절대 ute; 상단 : 0; 왼쪽 : 150px; z- 색인 : 10; 패딩 : 0; 여백 : 0; }

#menu_new li ul { 
    display: none; 
    margin: 0; 
    padding: 0; 
} 

희망이 도움이 될 것입니다!