Как привязать свойство border елементу при hover?

Есть 3 дропдауна, сделанные на bootstrap(код одного из них):

<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>

Хочу сделать следующее: при наведении мыши у button должны появляться border слева, сверху и справа, у ul в это же время с помощью css я убираю border-top. Эти дропдауны активируются не по клику а при наведениии курсора, т.е. по hover. Я попробовал кнопке выставлять border с помощью селектора с :hover, но возникла проблема-когда с самой кнопки уводишь курсор вниз к примеру, то ховер кнопки пропадает. Как можно реализовать это?