Question

我有一个问题给你们，我为我的网站制作了一个导航栏，但我无法应对下拉菜单。问题是，当我希望所有链接都在导航栏的中间时，但是当我将鼠标悬停在导航下拉菜单上时，它在悬停时不会保持打开状态。我知道我可以通过添加li float来解决这个问题：左边而不是li显示：内联，但是然后所有链接都向左移动，所以我的问题是：是否有一种方法可以将所有链接都集中在中间我的导航栏和我的导航dropdonw菜单可以在悬停时保持打开状态？这是我的代码：

＆＃13;

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;
   
}

＆＃13;

<!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>

＆＃13;

我实际上不知道它在这个在线编辑器中是如何工作的，但是当我这样做时它对我不起作用！请停下来！

导航栏中的下拉菜单在悬停在其上时不会保持打开状态

0 个答案: