Эффект зависания работает не так, как ожидалось - пользовательский интерфейс

Question

the plunker where I am trying to make «Все разговоры» отзывчивый.

Я использовал ниже стиль:

@media (max-width: 767px) { 
    #user-list { 
    display: none; 
    } 
    #dropdownMenu2:hover > #user-list{ 
    display: block; 
    } 
    #dropdownMenu2:hover{ 
    background: yellow; 
    } 
} 

1. То, что я хочу добиться того, чтобы показать список «Все разговоры» после того, как интерфейс мал. Я могу видеть, что background: yellow работает, но я не могу видеть идентификатор #user-list

2. Если возможно, пожалуйста, предложить поведение тумблер для того же с помощью data-toggle и data-target. Я пытался, но он не работает :(

Спасибо!

Answer 1

Ваше правило неправильно, что вы говорите, что # пользовательский список является дочерним # dropdownMenu2.

в код я могу видеть, что # пользовательский список не является ребенок, ни брат. у вас есть кнопки, завернутые в DIV (выпадающий all_conversation).

Либо переместите список пользователей inisde в DIV сразу после кнопки # dropdownMenu2, или удалить обертку div.

, то вы можете изменить правила CSS для:

#dropdownMenu2:hover + #user-list{ 
    display: block; 
    } 

Edit:

Извините за поздний ответ.

после просмотра вашего обновления вы даете абсолютное значение неправильному элементу.

chat-msgs должен оставаться относительным.

изменить правила по

@media (max-width: 767px){  
#dropdownMenu2:hover + #user-list, #user-list:hover { 
    display: block; 
    position: absolute; 
    width: 100%; 
    z-index: 100; 
    background: #fff; 
} 
} 

о парении в мобильном телефоне, это действительно не очень последовательно. Я предпочитаю использовать клик для мобильных устройств, и все эффекты зависания:

@media (min-width: 1025px){ 
    //all hover rules 
}