부트스트랩 navbar dropdown menu 클릭 대신 hover로 작동

부트스트랩의 dropdown menu로 nav bar를 구성할 때, 클릭할 경우에 하위 메뉴가 나타난다. 이를 hover시 나타나게 하려면 자신의 CSS파일에 아래 구문 추가하면 됨.

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

 

 

Dropdown Menu 예시는 부트스트랩 페이지에서...

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>