0
votes

HTML + CSS Hoverable Dropdown expande l'en-tête

Il y a un problème avec la liste déroulante, quand la survolez. Au lieu d'une ouverture normale, le menu déroulant élargit l'en-tête. Où est une erreur dans le code? J'ai écrit ce code à partir de l'exemple sur w3school () exemple de code, par lequel ce code est écrit Il y a aussi plusieurs tentatives pour faire la même chose: première tentative Deuxième tentative Et dans toutes ces tentatives, je fais la même erreur, mais je ne trouve pas où exactement. Quelqu'un peut-il montrer où sont les erreurs?

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

html css drop-down-menu hover

0 commentaires

4 Réponses :

2
votes

Modification simple à la position de CSS:

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

0 commentaires

0
votes

Ceci est dû au fait que vous avez donné Position: relative code> dans CSS, donnez plutôt Position: absolu code> pour le sélecteur suivant .inline: verser .Dropdown code> code> Pré> xxx pré>

et une modification supplémentaire est que, pour tous les sous-menus, vous avez mentionné la liste code> Dropdown code> au lieu de celui de la divulgation de classe Dropdown code > p>

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

0 commentaires

0
votes

.dropdown:hover .dropdown-content {
display: block;
position: absolute;
width: auto;
text-align: center;
}just delete the position line or change position in to absolute

0 commentaires

0
votes

Vous avez oublié de relier le fichier CSS dans votre code HTML. Assurez-vous de le faire en premier.

treillage il ne fera rien.

0 commentaires