Из-за чего происходит:
Хз. Вероятно это баг браузера ибо в спеке ничего про данную ситуацию я не нашел.
Как пофиксить:
Я предположил, что т.к. внутри у вас находится
input. который является генерируемым элементом, то когда у родителя меняется свойство
display, этот самый
input не обрабатывает событие
mouseout, которое как раз необходимо, чтобы браузер снял эффект
:hover.
Поэтому я решил отказаться от
display: none; и вместо этого прятать элемент по другому:
.drop_list {
position: relative;
left: -999em;
}
.focus .drop_list {
left: auto;
}
Вроде починилось. Но лучше всего отказаться от элементов
input type="text" и использовать вместо этого связку
span +
input type="hidden".