Кнопка Bootstrap CSS для IE

Question

В IE у меня появляется небольшая ошибка. Когда я нажимаю мою кнопку он делает это:

Что право, такая проблема возникает, когда я наведите курсор мыши на утверждение или менеджер пользователей:

Это некрасиво окно показывает вверх и его действительно странно, поскольку он не отображается в Chrome. Вот мой CSS:

.dropdown-menu { 
    margin-left: 55px; 



} 

.btn{ 
    background: none; 
    border: none; 
    font-size: 17.5px; 
    font-weight:bold;  
    width: 120px; 
    color: white;  


} 

.btn:hover{ 
    background: none; 
    color: black; 
    border: none; 
} 



.btn:after{ 
    background: none; 
    color: black; 
    border: none; 
} 

.btn:active{ 
    background: none; 
} 

.btn:active:focus{ 
    background: none; 
} 

.btn.active:focus, .btn.active:focus, .btn.active:hover, .btn:active.focus, .btn:active:focus, .btn:active:hover, .open>.dropdown-toggle.btn.focus, .open>.dropdown-toggle.btn:focus, .open>.dropdown-toggle.btn:hover, .close>.dropdown-menu.btn:hover, .close>.dropdown-toggle.btn.focus, .close>.dropdown-toggle.btn:focus{ 
    background: none; 
    color: black; 
    border: none; 
    outline: none !important; 
} 

.dropdown{ 
    position: relative; 
    top: -60px; 
    left: 900px; 
} 

И мой HTML:

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
<span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
<li> @Html.ActionLink("Approve", "Approve", "Admin")</li> 
<li>@Html.ActionLink("User Mananger", "UserManager", "Admin")</li>           
    </ul> 
</div> 

Answer 1

При наведении курсора на «Подтвердить» или «Диспетчер пользователей», щелкните правой кнопкой и выберите Проверить элемент, который поднимет DOM Проводник .. который покажет вам, СМЧ для тех элементов, которые <li> .. не .btn, которая является то, что CSS, что вы вывесили ссылается ...

Я довольно уверен, что что-то подобное в вашем CSS должен работать:

li:hover { 
    background-color: #000000 
} 

То же самое касается фокуса

li:focus { 
    background-color: #000000 
} 

Answer 2

Ваш CSS ссылается на кнопку, которая не является проблемой. Вопрос: li внутри ul прямо под ним. Ответ: У вас нет CSS, который обращается к цвету фона (при наведении) вашего li.

Что-то, как это должно работать:

li:hover { 
    background-color:#000000; 
}