18041 sujets

Questions générales et questions de débutants

Menu déroulant et background

upload/1634725513-83741-capturedancran2021-10-20no11..png Bonjour !

Je suis une grande débutante en développement informatique, je suis actuellement bloquée sur mon menu déroulant, jusque la tout va bien je touche presque au but il me semble, mais j'ai un soucis de background qui s'étire au fur et à mesure que je déroule mon menu même la ou il n'y a pas de texte...

Le dernier block bg apparaît et je voudrais qu'il disparaisse :
Modifié par eeebdg (20 Oct 2021 - 12:25)

<body>
    <div class="container">
        <nav>
            <ul>
                <li><a href="#">Institution</a>
                    <ul>
                        <li><a href="#">Présentation</a>
                            <ul>
                                <li><a href="#">Les Elus</a></li>
                                <li><a href="#"> Les Compétences</a></li>
                                <li><a href="#"> Un service en 2 min</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Comptes Rendus</a>
                            <ul>
                                <li><a href="#">Agenda</a></li>
                                <li><a href="#">Comptes Rendus, Assemblées, Délibération, Arrêtés</a></li>
                                <li><a href="#">Vidéos des Assemblées en visio</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Les Publications</a>
                            <ul>
                                <li><a href="#">Les Publications</a></li>
                                <li><a href="#">Rapport d'activité</a></li>
                                <li><a href="#">Documents Finances</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Opportunités, Emplois</a></li>
                        <li><a href="#">Les Marchés Publics</a></li>
                        <li><a href="#">Espace agents</a>
                            <ul>
                                <li><a href="#">Espace agents</a></li>
                                <li><a href="#">Comptes rendus réservé délégués communautaires</a></li>
                                <li><a href="#">Documents internes réservés</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Démarches</a>
                    <ul>
                        <li><a href="">Développement</a>
                            <ul>
                                <li><a href="#">Opération bon d'achat</a></li>
                                <li><a href="#">Aides aux enterprises</a></li>
                                <li><a href="#">Plateforme Emploi, Formation, Compétences</a></li>
                                <li><a href="#">Accueil d'entreprise</a></li>
                            </ul>
                        </li>
                        <li><a href="">Déchets Ménagers</a>
                            <ul>
                                <li><a href="#">Déchetterie</a></li>
                                <li><a href="#">Chercher un déchet ?</a></li>
                                <li><a href="#">Réduire ses déchets</a></li>
                                <li><a href="#">Acteurs du réemploi (ressourcerie)</a></li>
                                <li><a href="#">Professionnels (entreprises, associations)</a></li>
                            </ul>
                        </li>
                        <li><a href="">Assainissement des Eaux</a></li>
                        <li><a href="">Plan Climat</a>
                            <ul>
                                <li><a href="#">Qu'est-ce que c'est ?</a></li>
                                <li><a href="#">Le projet</a></li>
                                <li><a href="#">Atelier de créativité</a></li>
                                <li><a href="#">A vous la parole !</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</body>



nav ul{
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    font-family: 'Manrope', sans-serif;
    list-style: none;
    position: relative;
    color: white;
}

nav ul li{
     display: inline-block;
     border-bottom: 1px solid white;
}

nav>ul>li>a{
    color: #4A6166;
    width: 194px;
    line-height: 60px;
}

nav a{
     display: block;
     padding: 0 10px;
     line-height: 50px;
     font-size: 17px;
     text-decoration: none;
     color: white;
}

nav a:hover{
    background-color: rgba(73, 96, 101, 0.1);
}

nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
    background-color: #4A6166;
}

nav ul li:hover > ul{
    display: inherit;
}

nav ul ul li{
    float: none;
    display: list-item;
    position: relative;
    width: 214px;
}

nav ul ul li a:hover{
    background-color:rgba(0, 148, 147, 0.5);
}

nav ul ul ul li{
    position: relative;
    top: -60px;
    right: 214px;
    background-color: #4A6166;
}

li > a::after{
    content: "  >";
}

li>a:only-child::after{
    content: '';
}
Il y a sans doute des erreurs, comme je l'ai dis je suis une vraie débutante je n'ai eu que quelques cours...
Merci de votre compréhension Smiley smile
Hello, par exemple je vois que tu utilise 
  right: 214px;

ici 
nav ul ul ul li{
    position: relative;
    top: -60px;
    right: 214px;
    background-color: #4A6166;
}

essaye plutot avec l'inverse : 
margin-left: -214px;
Modérateur
Bonjour,

En repositionnant tes li, le parent ul, n'est pas déplacé, et c'est le fond des sous listes ul que tu vois.

Il te faut repositionner tes ul , les li s'afficheront là où ils se trouvent sans que tu ais à faire autre chose.

Exemple de correction de ton fichier css pour tes ul des niveaux inférieurs:
nav ul ul{
  display: none;
  position: absolute;
  right: 0;
  background-color: #4a6166;
}
nav ul ul ul {
  right:100%;/* ou left:100% si c'est pour les afficher à droite du parent */
  top:0;
}


Tu peut retirer ces codes devenu inutiles ou incompatibles: 
nav ul ul ul li {
  position: relative;
  background-color: #4a6166;
}

et 
nav ul ul li {
  float: none;
  display: list-item;
  position: relative;
  width: 214px;
}

et replacer width et position dans 
nav ul li {
 /* display:inline-block;  inutile  -> premier niveau enfant de flex*/
  border-bottom: 1px solid white;
  position: relative;
  width:214px;
}


cdt
Modifié par gcyrillus (20 Oct 2021 - 18:00)
Sujet clos
Aller à