Блог

Главная - Вопросы по программированию - Выпадающее меню в навигационной панели не остается открытым при наведении на него

Выпадающее меню в навигационной панели не остается открытым при наведении на него

#html #css

#HTML #css

Вопрос:

у меня к вам вопрос, ребята, я создал навигационную панель для своего веб-сайта, но я не могу справиться с выпадающим меню. Проблема в том, что когда я хочу, чтобы все ссылки находились в середине навигационной панели, но когда я наведу курсор на выпадающее меню навигации, оно не останется открытым при наведении. Я знаю, что могу это исправить, добавив li float:left вместо li display:inline, но тогда все ссылки идут влево, поэтому мой вопрос: есть ли способ, при котором все мои ссылки могли бы быть сосредоточены в середине моей навигационной панели, а мое выпадающее меню навигации могло бы оставаться открытымпри наведении курсора мыши? Это мой код:

 nav  {
    
    font-size:75%;
    text-align: center;
}
ul {
    
    width:100%;
    list-style-type: none;
    margin-left: -8px;
    padding: 0px;
    overflow: hidden;
    background-color: black;
}

li {
    display: inline;
}

li a {
    display: inline-block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
     color:darkgrey;     
}

li.dropdown {
    display: inline-block;
    
}



.dropdown-content {
    
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 134px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
    display: block;
   
} 
 <!DOCTYPE html>
<html>
<head>
    
</head>

<body>  
<nav>
    <ul>
            <li><a href="mainpage.html">Начало</a></li>
            <li class="dropdown" >
                <a href="zafirmata.html" class="dropbtn">За фирмата</a>
                <div class="dropdown-content">
                    <a  href="#">Link 1</a>
                    <a  href="#">Link 2</a>
                    <a  href="#">Link 3</a>
                </div>
            </li>
            <li><a href="zasobstvenika1CV.html">За собствениците</a></li>
            <li><a href="produkti.html">Продукти</a></li>
            <li><a href="porachki.html">Поръчки</a></li>
            <li><a href="mneniq.html">Мнения</a></li>
    </ul>
</nav>
 </body>
 </html>

На самом деле я понятия не имею, как это работает в этом онлайн-редакторе, но у меня это не работает, когда я это делаю! Пожалуйста, остановитесь!

Комментарии:

1. поскольку здесь все работает нормально…. Это все ваши коды?… какой браузер и версию браузера вы используете, чтобы ожидаемый результат не работал?

2. Ну, я использую Chrome, и я думаю, что это последняя версия. На самом деле только сейчас я обнаружил , что видео , которое я поместил прямо под выпадающим списком , вызывает проблемы , поэтому , когда я переместил его , выпадающий список работает нормально! Однако я до сих пор понятия не имею, почему он прослушивался, когда под ним было видео!

3. хммм …… наверное, загляните в правила css для видео контейнера или его родительского контейнера… Поместите этот HTML-код видео (если он не длинный) в свой вопрос, лучше понять, в чем проблема, от того, кто это делает….

Метки: