Twitter 부트 스트랩 하위 메뉴에 간격 추가

Twitter 부트 스트랩 하위 메뉴의 왼쪽에 간격을 추가하여 두 번째 및 세 번째 레벨 메뉴 사이에 약간의 간격을 두려고합니다. 사용자가 틈 위로 마우스를 이동하면Twitter 부트 스트랩 하위 메뉴에 간격 추가

.dropdown-submenu > .dropdown-menu { 
    margin: -1px 0 0 5px; 
}

그러나, 하위 메뉴가 (느린 이동) 사라집니다 : 그래서, 나는 다음과 같은 추가 CSS를 사용했습니다. 공간을 추가하고 마우스를 놓을 때 메뉴를 계속 표시하려면 어떻게해야합니까?

는 여기에 바이올린입니다 :

http://jsfiddle.net/trxk8/5/

출처

2013-01-06 David

이 솔루션의 예쁜 진짜가 아니라 당신이 할 수있는 투명 5px 국경과 .dropdown-submenu 요소 밖으로 패드.

CSS

.dropdown-submenu { 
    border-right: transparent block 5px; 
    margin-right: -5px; 
} 

.dropdown-submenu > a { 
    position: relative; 
    right: 5px; 
    margin-left: 5px; 
}

근무 예 : http://jsfiddle.net/trxk8/8/

이것의 부작용은 또한 자식 앵커 태그를 조금 아래로 손질해야한다는 것

참고로, 당신은 여전히 margin-top: -1px을 .dropdown-submenu > .dropdown-menu

출처

2013-01-06 22:49:21

나를 위해 충분히 가깝게 :) 내가 보는 유일한 문제는 왼쪽 상단 모서리가 둥글 리지 않고 있지만 너무 큰 거래는 아닙니다. 감사! – David

@David 왼쪽 상단 모서리가 반올림되지 않는 것은 부트 스트랩 CSS 기능 ('.dropdown-submenu> .dropdown-menu'의 2996 행)입니다. '.dropdown-submenu> .dropdown-menu {border-radius : 6px 6px 6px 6px;를 사용하여 자신의 CSS에서 이것을 덮어 쓸 수 있습니다. }' –

Twitter 부트 스트랩 하위 메뉴에 간격 추가

답변

관련 문제