CSS 중첩 된 하위 메뉴 부모와 같은 수준 표시

Question

중첩 된 하위 메뉴를 부모와 동일한 수준으로 표시하려면 어떻게해야합니까?

내가이

body { 
padding-top: 60px; 
padding-bottom: 40px; 
} 

.sidebar-nav { 
padding: 9px 0; 
} 

.dropdown-menu .sub-menu { 
left: 100%; 
position: absolute; 
top: 0; 
visibility: hidden; 
margin-top: -1px; 
} 

.dropdown-menu li:hover .sub-menu { 
visibility: visible; 
display: block; 
}  

.navbar .sub-menu:before { 
border-bottom: 7px solid transparent; 
border-left: none; 
border-right: 7px solid rgba(0, 0, 0, 0.2); 
border-top: 7px solid transparent; 
left: -7px; 
top: 10px; 
} 
.navbar .sub-menu:after { 
border-top: 6px solid transparent; 
border-left: none; 
border-right: 6px solid #fff; 
border-bottom: 6px solid transparent; 
left: 10px; 
top: 11px; 
left: -6px; 
} 

처럼 중첩 된 하위 메뉴를 처리하는 custon의 CSS를 만들어이 당신은 거의 다있는 JSFiddle 링크

Answer 1

입니다. 이것은 너무 귀하의 하위 메뉴의 절대 위치 목록 요소가 아닌 전체 목록을 기준으로합니다

.dropdown-menu > li { 
    position: relative; 
} 

: 당신은 당신의 CSS에 다음을 추가해야합니다.