There are 3 dropsdown, made on bootstrap (code of one of them):
<div class="dropdown"> <button class="dropdown-filter dropdown-toggle" type="button" data-toggle="dropdown"> <span class="filter-name">BUTTON</span> <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span> </button> <ul class="dropdown-menu "> <li class="cat-item"> <div class="custom-checkbox"> <dd> <input id="id1" type="checkbox" class="sort" name="name" value="val"/> <label for="id1"></label> Item </dd> </div> </li> </ul> </div> I want to do the following: when hovering the mouse, the button should have a border on the left, top and right, and ul at the same time with css I remove the border-top. These dropdowns are activated not by a click but by moving the cursor, i.e. by hover . I tried the button to set the border using the selector with :hover , but there was a problem — when you move the cursor down from the button itself, for example, the button hover disappears. How can this be realized?
