Выпадающий список CSS не станет видимым при наведении, но станет скрытым при наведении

#html #css #drop-down-menu

#HTML #css #выпадающее меню

Вопрос:

Я пытаюсь создать выпадающее меню при наведении. Я не могу заставить его работать. В настоящее время у меня есть меню, которое отображается и становится скрытым при наведении. Я устал просто переключать видимое и невидимое, но это не сработало. Я также попытался изменить отображение, но это не сработало (это испортило остальную часть моего меню.)

 /***************
menu_extend
***************/
nav ul li:first-child:hover   #menu_extend {

    visibility: hidden; 
}

#menu_extend ul {
    display: inline-block;
    position: absolute;
    width: 80px;
    left: 0px;
    top: 30px;
    background-color: rgba(0, 0, 0, .8);
}

http://jsfiddle.net/nZg7Q/

Ответ №1:

Проблема в том, что элементы и свойства, которые вы настраиваете, не совпадают. Этот способ будет работать:

 nav ul li:first-child:hover   #menu_extend ul {
    display: inline-block; 
}

#menu_extend ul {
    display: none;
    position: absolute;
    width: 80px;
    left: 0px;
    top: 30px;
    background-color: rgba(0, 0, 0, .8);
}

1. Это работает, но мой выпадающий список исчезает, как только я пытаюсь щелкнуть вложенный li. Я попробовал #menu_extened ul:hover {display: inline-block}, но это не сработало.

2. Добавление другого правила для #menu_extend ul:hover установки display to inline-block должно сделать свое дело.

3. Спасибо, Робби. Я понял это. Мне пришлось настроить выпадающий список так, чтобы он перекрывался с пунктом меню, который создал выпадающий список при наведении курсора мыши. Раньше был разрыв между тем, где заканчивался мой основной навигатор, и моим выпадающим списком. Еще раз спасибо за помощь новичку!