Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap như thế nào vậy? Mình có cái menu bootstrap, mình trước có sử dụng làm cái gì đó nó chuyển từ hiệu ứng hiện tại là trên lattop click nó sẽ hiện menu con. Giờ mình muốn đổi từ click sang hover vào menu cha nó sẽ hiện các thanh menu con thì như thế nào? Mã: <div class="navbar navbar-inverse row" style="width: 100%;margin-top: 10px;margin-bottom: 5px;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="/" class="navbar-brand">Trang chủ</a> </div> <div class="navbar-collapse in" style="padding-left: 15px; padding-right: 0px; height: auto;"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Thống kê <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Công việc</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class=""> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tài khoản <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="/Admin/Master/Login">Đăng xuất</a></li> <li><a href="/Admin/Master/Change">Đổi mật khẩu</a></li> <li class="divider"></li> <li><a href="/Admin/Master">Quản lý tài khoản</a></li> <li><a href="/Admin/Role">Quản lý vai trò</a></li> <li><a href="/Admin/WebAction">Quản lý chức năng</a></li> <li class="divider"></li> <li><a href="/Admin/MasterRole">Phân vai trò</a></li> <li><a href="/Admin/WebActionRole">Phân quyền sử dụng</a></li> </ul> </li> </ul> </div> </div>
Của bạn đây: Vào CSS thêm: HTML: .dropdown:hover .dropdown-menu{ display:block; } Hoặc để mặc định nếu màn hình nhỏ hơn 768px của mobi thì phải click mới được thì dùng code (Khuyên dùng) HTML: @media only screen and (min-width: 768px) { .dropdown:hover .dropdown-menu{ display:block; } }
HTML: @media only screen and (min-width: 768px) { .dropdown:hover .dropdown-menu{ display:block; } } Code css tốt, cảm ơn ad nhiều
