При фиксированном положении Навбара выпадающий список перестает работать - PullRequest
Новая
       4

При фиксированном положении Навбара выпадающий список перестает работать

0 голосов
/ 28 марта 2020

Я запрограммировал навигационную панель для своего сайта, и одним из пунктов было выпадающее меню. Раскрывающийся список работал, но когда я установил фиксированное положение панели навигации, чтобы она оставалась на странице даже при прокрутке вниз, раскрывающийся список перестает работать. вот код перед 

/*CSS*/
body{
        font-family: Optima, Courier, Ariel;
        background-color:#000000;
        background-image: url('background.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
    .navbar {
        overflow: hidden;
        background-color: #000000;
        max-height: 68px;
    }

    .navbar a {
        float: left;
        font-size: 25px;
        color: #00cc00;
        text-align: center;
        padding: 20px 40px;
        text-decoration: none;
    }

    .dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown .dropbtn {
        font-size: 25px;  
        border: none;
        outline: none;
        color: #00cc00;
        padding: 20px 40px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: #00cc00;
        color: #000000;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #00cc00;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(120,150,120,0.2);
        z-index: 1;
    }

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

    .dropdown-content a:hover {
        background-color: #000000;
        color: #00cc00
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    div.centered{
        background-color:#111111;
        margin-left:10%;
        margin-right:10%;
        color:#00cc00;
    }

<!--HTML-->
<body>
    <div class="navbar">
    <a href="#home"><img src="logo.png" width = "48" height = "32"></a>
    <a href="#home">Home</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown &#9660</button>
        <div class="dropdown-content">
            <a href = "#item1">item1</a>
            <a href = "#item2">item2</a>
            <a href = "#item3">item3</a>  
        </div>
    </div>
</div>

, тогда я только изменил css навигационной панели на этот 

.navbar {
        overflow: hidden;
        background-color: #000000;
        max-height: 68px;
        position:fixed;
        top:0;
        left:0;
        right:0;
    }

Когда я сделал это изменение, навигационная панель не была затронута прокручивая, и выглядело так же, но выпадающий перестал работать. Есть ли решение, которое позволяет мне сохранить обе функции?

Ответы [ 3 ]

1 голос
/ 28 марта 2020

Я разобрался, как это исправить.

Вот код CSS. Я изменил 

.dropdown:hover .dropdown-content {
    display: block;
}

на 

.dropdown:hover .dropdown-content {
    display: block;
    position:fixed;
}
0 голосов
/ 28 марта 2020

да, есть решение, и оно очень простое, просто сохраните это 

.navbar {
        overflow: hidden;
        background-color: #000000;
        max-height: 68px;
        position:fixed;
        top:0;
        left:0;
        right:0;
    }

, но также добавьте position:fixed к классу .dropdown-content, ваш класс dropdown-content должен теперь выглядело так: 

 .dropdown-content {
        display: none;
        position: fixed;
        background-color: #00cc00;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(120,150,120,0.2);
        z-index: 1;
    }

, так что вы будете поддерживать выпадающий список и по-прежнему фиксировать положение своей навигационной панели

0 голосов
/ 28 марта 2020

После проверки элементов я обнаружил, что все работает, как и ожидалось, но вы допустили одну ошибку: вы добавили overflow: hidden к .navbar в строке 11, поэтому ваше раскрывающееся меню не было видно.

Вот кодовая ручка ссылка , где я прокомментировал эту строку.

Надеюсь, это ответит на ваш вопрос.

...