échec de la réception d'un sous-menu masqué dans la barre de navigation

user5428357

Je souhaite créer un menu déroulant horizontal. Cependant, lorsque j'utilise nav li:hover > ulpour récupérer le sous-menu après l'avoir masqué avec succès display:none, le sous-menu disparaît complètement. Comment puis-je faire réapparaître le sous-menu lorsque la souris survole le bouton "Collection"? apprécier ton aide.

HTML:

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="Princess.css"> 
        <title> PPRINCESS </title> 
    </head>

    <body>

        <div id="wrap"> 
            <div id="title">
                <h1> PPRINCESS </h1>
            </div>
                <ul id="bar">
                    <li> <a href="home.html" > Home </a> </li>
                    <li> <a href="collection.html" > Collection </a> </li>
                            <ul>
                                <li>  <a href="angels.html"> Angel on Meadows </a> </li>
                                <li>  <a href="beach.html"> Beachy Ladies </a> </li>
                                <li>  <a href="streets.html"> Pavements and Streets </a> </li>
                                <li>  <a href="symbol.html"> Become a Symbol </a> </li>
                            </ul>
                    <li> <a href "shoes.html" > Shoes </a> </li>
                </ul>
        </div>

    </body> 

</html>

CSS:

body {
    background-color: #ffcda0;
}
#wrap {
    width: 1000px; 
    background-color: #ffff66;
}

#title {
    width:250px;
    padding:20px;
    float:left;
    display:inline-block;

    /* text-color: #525252;*/
}
#bar { 
    background-color: #fefbf7;
    width: 650px;  
    float: right;
    list-style:none; 
    padding: 20px;  
    display:inline-block ; 
}

#bar li {
    float:left;
    background-color: #fefbf7;
} 

#bar li a {
    display: block;
    padding: 20px;  
    font-weight: bold; 
    color: #4c4c4c;
} 
#bar li:hover {
    background-color:beige;
}
#bar li a,visited {
    color: moccasin;
    text-decoration: underline; 
}
#bar ul {
    display: none;
    position: absolute; 
}

#bar li:hover > ul li{
    display:block;
}
Xahed Kamal

Correction de votre code. Cependant, vous devrez appliquer plus de CSS pour que le premier sous-menu ait l'air bien.

body {
    background-color: #ffcda0;
}

#wrap {
    width: 1000px; 
    background-color: #ffff66;
}

#title {
    width:250px;
    padding:20px;
    float:left;
    display:inline-block;

    /* text-color: #525252;*/
}
#bar { 
    background-color: #fefbf7;
    width: 650px;  
    float: right;
    list-style:none; 
    padding: 20px;  
    display:inline-block ; 
}

#bar li {
    float:left;
    background-color: #fefbf7;
} 

#bar li a {
    display: block;
    padding: 20px;  
    font-weight: bold; 
    color: #4c4c4c;
} 
#bar li:hover {
    background-color:beige;
}
#bar li a,visited {
    color: moccasin;
    text-decoration: underline; 
}
#bar ul {
    display: none;
    position: absolute; 
}

#bar li:hover > ul{
    display:block;
}
        <div id="wrap"> 
            <div id="title">
                <h1> PPRINCESS </h1>
            </div>
                <ul id="bar">
                    <li> <a href="home.html" > Home </a> </li>
                    <li> <a href="collection.html" > Collection </a> 
                            <ul>
                                <li>  <a href="angels.html"> Angel on Meadows </a> </li>
                                <li>  <a href="beach.html"> Beachy Ladies </a> </li>
                                <li>  <a href="streets.html"> Pavements and Streets </a> </li>
                                <li>  <a href="symbol.html"> Become a Symbol </a> </li>
                            </ul>
                      </li>
                    <li> <a href "shoes.html" > Shoes </a> </li>
                </ul>
        </div>

En outre, vous pouvez consulter cette réponse pour un meilleur menu - Comment créer une barre de menus avec un sous-menu imbriqué css

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Problème d'affichage du menu déroulant sous forme de bloc dans la barre de navigation réactive

Élément de sous-menu dans la barre de navigation réduite

(Swift) La barre de navigation est masquée dans viewController

Création d'un menu de superposition de réduction de la barre de navigation Bootstrap

Créer un menu déroulant dans la barre de navigation flexbox

Comment implémenter un survol de la barre de navigation dans Bootstrap v4 avec sous-menu déroulant à plusieurs niveaux?

Sous-menu de la barre de navigation

Barre blanche sous la barre de navigation dans bootstrap

Liste déroulante de la barre de navigation avec la barre de sous-menu horizontale afficher/masquer

Erreur de liaison dans la barre d'outils masquée

Les boutons de la barre de navigation UIDocumentPicker sont masqués sous iOS 11

Je ne parviens pas à créer un sous-menu de la barre de navigation

Comment ouvrir le sous-menu déroulant à partir de la barre de navigation multiple ?

La deuxième barre de navigation bootstrap chevauchant un menu déroulant de la première barre de navigation?

Déplacer le menu de navigation vers le haut, sous la barre d'action Android / XML

Échec de la barre de navigation réactive

Comment afficher le sous-menu horizontal dans la barre de navigation Bootrap ?

Comment utiliser le sous-menu dans la barre de navigation rmarkdown?

Comment créer un sous-menu imbriqué sur la barre de navigation horizontale verticale?

Ajout d'un | à la barre de navigation

changer la forme du menu déroulant dans la barre de navigation d'amorçage

Android : Comment remplacer le menu de la barre d'outils du tiroir de navigation dans un fragment

Ajout d'un menu déroulant à la barre de navigation dans une application Web ASP.Net Core (bootstrap)

La liste déroulante du menu de la barre de navigation CSS de Materialise ne passera pas sous l'origine

Une partie de la disposition linéaire est masquée sous la barre d'action

Menu de hamburgers Bootsrap 4 dans la barre de navigation

Essayer de réparer une barre de navigation avec un menu déroulant en haut de la page

Le menu se déplace vers la gauche dans la barre de navigation pendant le survol

Comment restreindre la largeur du menu déroulant Bootstrap 3 dans la barre de navigation

TOP liste

  1. 1

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  2. 2

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  3. 3

    Microsoft.WebApplication.targets

  4. 4

    knn classification 10 plis de l'outil et du tri

  5. 5

    Quelle est la relation entre le modèle et le tableau ? C'est compliqué

  6. 6

    Créer un système Buzzer à l'aide de python

  7. 7

    Fonction de puissance en Java

  8. 8

    opérations en virgule flottante dans go

  9. 9

    Comment définir la couleur de l'intersection dans un diagramme de Venn?

  10. 10

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  11. 11

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  12. 12

    AutoMapper.Collection.EFCore - Erreur générée lors de la configuration

  13. 13

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  14. 14

    Comment remplir les valeurs manquantes avec plusieurs colonnes dans R

  15. 15

    Comment puis-je ajouter un UIView sous mon contrôleur de barre d'onglets par programme?

  16. 16

    Yat-il un référentiel maven application Java à démarrer rapidement 11

  17. 17

    Comment rechercher des éléments dans une ArrayList? - Java

  18. 18

    Comment utiliser HttpClient avec TOUT cert ssl, quelle que soit la « mauvaise » est

  19. 19

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  20. 20

    Sélectionnez le bouton radio sur la saisie de texte

  21. 21

    Placez le modeBar en haut au centre à l'aide de plotly.js

chaudétiquette

Archive