HTML + CSS выпадающий раскрывающийся список расширяет заголовок - PullRequest
Новая
       14

HTML + CSS выпадающий раскрывающийся список расширяет заголовок

0 голосов
/ 10 января 2019

Существует проблема с выпадающим списком при наведении на него. Вместо обычного открытия, раскрывающееся меню расширяет заголовок. Где ошибка в коде? Я написал этот код из примера на w3school () Пример кода, на котором этот код написан Есть также несколько попыток сделать то же самое: первая попытка вторая попытка И во всех этих попытках я делаю ту же ошибку, но не могу найти где именно так. Может кто-нибудь показать, где ошибки? 

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header, nav {
    background-color: aliceblue;
    color: darkcyan;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px;
}

a {
    text-decoration: none;
    color: darkcyan;
    padding: 10px;
    display: inline-block;
}

.active {
    padding-left: 0;
}

a, .dropdown {
    display: inline-block;
    width: 100px;
    padding: 10px;
}

.dropdown .dropbutton {
    border: none;
    outline: none;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    color: black;
    width: auto;
}

.dropdown-content a {
    float: none;
    padding: 10px;
    display: block;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    display: block;
    position: relative;
    width: auto;
    text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Third Version</title>
</head>
<body>

<header>

    <h1>The Homework</h1>

    <nav>

        <a href="" target="" class="active">Home</a>
        <a href="hobbies.html" target="_blank">Hobbies</a>
        <a href="third.html" target="_blank">Third Page</a>

        <div class="dropdown">
            <button class="dropbutton">Dropdown</button>
            <div class="dropdown-content">
                <a href="">One</a>
                <a href="">Two</a>
                <a href="">Three</a>
            </div>
        </div>

    </nav>

</header>
  
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 10 января 2019

Вы забыли связать файл CSS в своем HTML-коде. Сначала убедитесь, что вы делаете это.

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

0 голосов
/ 10 января 2019

Это потому, что вы дали position:relative в css вместо position:absolute для следующего селектора .inline:hover .dropdown 

.inline:hover .dropdown {
    display: block;
    position: absolute;
    padding: 10px;
    background-color: white;
    color: dimgray;
}

И еще одна модификация заключается в том, что для всех подменю вы упомянули класс dropdown вместо того, что под одним диваном, имеющим класс dropdown 

<div class="inline">The Page
            <div class="dropdown">
              <div>One</div>
              <div>Two</div>
              <div>Three</div>
            </div>
        </div>

Вот рабочий пример: https://liveweave.com/NpUwOZ

0 голосов
/ 10 января 2019 
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
width: auto;
text-align: center;

}

просто удалите строку положения или измените положение на абсолютное

0 голосов
/ 10 января 2019

Сделайте простое изменение позиции в css: 

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;----------------------This One
    width: auto;
    text-align: center;
}

Используйте эту ссылку, чтобы понять: Разница между относительным и абсолютным

...