Twitter Bootstrap에서 마우스오버 활성화 드롭다운을 어떻게 만들 수 있나요?

Twitter Bootstrap용 마우스 오버 드롭다운

Twitter Bootstrap의 메뉴 시스템을 활용하는 경우 마우스를 올리면 메뉴가 자동으로 드롭다운되도록 하는 것이 바람직할 수 있습니다. 메뉴 제목을 클릭해야 합니다. 또한 사용자는 메뉴 제목 옆에 있는 탐색 화살표를 숨기는 것을 선호할 수 있습니다.

호버 드롭다운용 CSS

호버 시 자동 드롭다운을 활성화하려면 다음 CSS를 구현하세요.

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

반응형 기능을 위해 코드를 미디어로 래핑하세요. 쿼리:

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

탐색 화살표를 숨기기 위한 CSS

Bootstrap 3:

HTML 제거 .dropdown-toggle 앵커에서 element.

<a class="dropdown-toggle" data-toggle="dropdown" href="#">
    Dropdown
</a></p>
<p><strong>Bootstrap 2 이하:</strong></p>
<p>이 CSS 선택기와 코드를 사용하여 화살표를 타겟팅하고 제거합니다.</p>
<pre class="brush:php;toolbar:false">a.menu:after, .dropdown-toggle:after {
    content: none;
}

이해 이러한 CSS 요소의 작동 방식은 특정 요구 사항에 맞게 부트스트랩 메뉴를 사용자 정의하는 능력을 향상시킵니다.

위 내용은 Twitter Bootstrap에서 마우스오버 활성화 드롭다운을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!