28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

Bonjour à tous!

je suis coincée sur un menu déroulant que je souhaite réaliser en html et css.
j'ai suivi un tuto sur le net qui a partiellement résolu mon problème.
le hic, c'est que le sous menu s'affiche bien au survol du premier niveau de la navigation, mais dès qu'on quitte ce bouton (pour cliquer sur un item du sous menu par exemple), le sous menu disparaît.
j'ai probablement loupé un épisode...

Voila le code
<nav>
				<ul class="nav-bar">
					<li>
						<span class="niv1">Créer mon abonnement</span>
						<ul class="submenu">
							<li><a href="">Chaussettes</a></li>
							<li><a href="">Soquettes</a></li>
							<li><a href="">Mi-bas</a></li>
							<li><a href="">Collants</a></li>
						</ul>
					</li>
					<li>
						<span class="niv1">Offrir un abonnement</span>
						<ul class="submenu">
							<li><a href="">Chaussettes</a></li>
							<li><a href="">Soquettes</a></li>
							<li><a href="">Mi-bas</a></li>
							<li><a href="">Collants</a></li>
						</ul>
					</li>
					<li><a href="" class="ancre"><span class="niv1">Comment ça marche?</span></a></li>
					<li>
						<span class="niv1">Arrière boutique</span>
						<ul class="submenu">
							<li><a href="">Contact</a></li>
							<li><a href="">F.A.Q</a></li>
						</ul>
					</li>
				</ul>
			</nav>


nav ul ul {
	display: none;
	position: absolute; 
	left: 0; 
	right: 0;
	top: 50px; 
	margin: 0; 
	padding-bottom: 20px;
	background-color: #9bd1d5;
	border-bottom: 2px solid #e30613;
	transition: all 0.2s ease-in-out;
} 
nav li:hover ul.submenu {
	display:block;
}


merci d'avance pour vos conseils
Salut alex78180,
j'ai repris ton code et fait un petit test :
-Si tu enlève le "position: absolute;" de "nav ul ul" cela fonctionne très bien : les lignes du sous-menu sont affichées en-dessous de la ligne du menu et tu peux y accéder, les autres lignes du menu sont décalées.
ou en gardant le position: absolute
-Si tu remplace ton top: 50px par un left: 200px ça marche aussi sans décalage avec le sous-menu à droite du menu...

exemple avec le left:200px:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            nav ul ul {
                    display: none;
                    position: absolute; 
                    left: 0; 
                    right: 0;
                    /*top: 50px;*/ 
                    left: 200px;
                    margin: 0; 
                    padding-bottom: 20px;
                    background-color: #9bd1d5;
                    border-bottom: 2px solid #e30613;
                    transition: all 0.2s ease-in-out;
            } 
            nav li:hover ul.submenu {
                    display:block;
            }
        </style>
    </head>
    <body>
        <nav>
            <ul class="nav-bar">
                    <li>
                            <span class="niv1">Créer mon abonnement</span>
                            <ul class="submenu">
                                    <li><a href="">Créer Chaussettes</a></li>
                                    <li><a href="">Créer Soquettes</a></li>
                                    <li><a href="">Créer Mi-bas</a></li>
                                    <li><a href="">Créer Collants</a></li>
                            </ul>
                    </li>
                    <li>
                            <span class="niv1">Offrir un abonnement</span>
                            <ul class="submenu">
                                    <li><a href="">Offrir Chaussettes</a></li>
                                    <li><a href="">Offrir Soquettes</a></li>
                                    <li><a href="">Offrir Mi-bas</a></li>
                                    <li><a href="">Offrir Collants</a></li>
                            </ul>
                    </li>
                    <li><a href="" class="ancre"><span class="niv1">Comment ça marche?</span></a></li>
                    <li>
                            <span class="niv1">Arrière boutique</span>
                            <ul class="submenu">
                                    <li><a href="">Contact</a></li>
                                    <li><a href="">F.A.Q</a></li>
                            </ul>
                    </li>
            </ul>
        </nav>
    </body>
</html>


Bonne soirée
Sujet clos
Aller à