트위터 부트스트랩 드롭다운 메뉴 마우스 오버 시 서브 메뉴 보이기 2

트위터 부트스트랩을 이용하면 기본적으로 메뉴바의 주메뉴를 클릭해야 서브 메뉴가 나타나는 것이 기본 설정입니다. 이전 글에서 클릭하지 않고도 마우스만 올리면 서브 메뉴가 나타나는 방법을 소개했는데 새로운 방법이 있더군요. 간단하게 스타일시트만 추가하면 됩니다. 이 방법은 CSS에서 아주 많이 사용해왔는데 고정관념이란 것이 아주 무섭네요. 부트스트랩은 이렇게 설정이 돼있으니까 항상 이렇게 사용해야한다는 것이 고정관념이었습니다. 더구나 마우스를 올리면 서브 메뉴가 나오도록 하는 플러그인이 나와있으니까 이러한 고정관념을 더욱 부채질하지 않았나 하는 생각도 듭니다. 

이 플러그인이 존재의 가치가 있을지는 두고봐야겠지만 스타일시트로 간단하게 처리하는 방법은 다음과 같습니다.

ul.nav li.dropdown:hover > ul.dropdown-menu{

    display: block;

    margin: 0;

}

스타일시트에 위 코드만 추가하면 됩니다. 간단하죠. 이전에는 제이쿼리 플러그인을 추가하고, 링크 만들고, 스크립트 코드 추가하고, 선택자를 추가하는 번거로움이 없어졌습니다.