Centrer un sous menu
Bonjour,
je n'arrive pas à centrer un sous-menu dont voici le HTML
<nav> <ul class="nav"> <li><a href="#jaune">Menu1</a></li> <li><a href="#">Menu2</a> <ul> <li><a href="#green">Sous Menu1</a></li> <li><a href="#grey">Sous Menu 2</a></li> </ul> </li> <li><a href="#rocknroll">Menu3</a></li> <li><a href="Contact/formpage.html" target="_blank">Contact</a></li> </ul> </nav>
et les CSS
.nav li a
{
display: inline-block;
color: white;
font-family: 'helvetica_now_text_black','Raleway', sans-serif;
font-size: 24px;
transition: all 0.3s;
transform: scale(0.8);
opacity: 1;
white-space: nowrap;
text-align:center;
text-shadow: 1px 1px 2px black;
}
Merci pour votre aide, bonne journée ;)
4 réponses
-
Salut,
Je ne comprends pas ta question, c'est le comportement normal d'un sous-menu qu'il soit décalé à droite par rapport au menu parent.
-
Bonjour Diablo76,
Peut-être que je m'explique mal (j'en suis certain :) Un petit screenshot pour être clair : sous_Menu_a et sous_Menu_b ne sont pas centrés sur ma page par rapport à Menu2, il y a un décalage à gauche sur sous_Menu_a.
pour le coup, c'est pas terrible : / Comment puis-je y remédier ?
Merci beaucoup et bonne soirée.
-
Ah ok, car dans l'exemple que tu donnes plus haut, tu imbriques une liste non ordonnée dans une liste non ordonnée, ce qui donne et c'est normal :
Maintenant pour une présentation comme ta copie d'écran :
Code Html :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Menu</title> </head> <body> <header></header> <nav> <ul class="nav"> <div> <li><a href="#">Menu1</a></li> </div> <div> <li><a href="#">Menu2</a> <li><a href="#green">Sous Menu1</a></li> <li><a href="#grey">Sous Menu 2</a></li> </div> <div> <li><a href="#">Menu3</a></li> </div> </ul> </nav> <footer></footer> </body> </html>Code Css :
.nav { display: flex; justify-content: space-around; padding: 0; margin: 0; list-style-type: none; text-align: center; } .nav li a { text-decoration: none; color: #000000; }Resultat :
Ton décalage est surement dû à un problème de padding ou/et de margin.
-
-
Bonjour Diablo76,
Merci pour tes réponses, c'est super sympa. Malheureusement, j'ai oublié une chose :(
La capture était pour te montrer le centrage d'un sous menu, ce que la capture ne montre pas du tout c'est que la barre de nav est fixée à droite, avec cette animation :
<script> $(document).ready(function(){ $('.nav').hide(); }); $(window).load(function(){ $('.nav').fadeIn('slow'); $(".nav").delay(700).animate({ right:'10px', opacity:1 },1200,'swing'); }); </script>Peut-être serait-il possible de centrer les sous-menu "à la main" avec un margin, ce serait plus simple ? Est-ce possible ?
Bonne soirée ;)
-
Bonjour Diablo76,
voici le HTML
<nav> <ul class="nav"> <li><a href="#jaune">Menu 1</a></li> <li> <a href="#">Menu 2</a> <ul> <li><a href="#green">Sous Menu 1</a></li> <li><a href="#glauque">Sous Menu 2</a></li> </ul> </li> <li><a href="#rocknroll">Menu 3</a></li> <li><a href="Contact/formpage.html" target="_blank">Contact</a></li> </ul> </nav>
Et le CSS
.nav { margin: 0; padding: 10px 10px 0 0; animation-duration: 1s; animation-name: slidein; text-align: right; left: -3000px; position: fixed; list-style-type: none; } @keyframes slidein { from { font-size: 12px; } 75% { font-size: 60px; } to { font-size: 20px; } } .nav ul, .nav li { margin: 0; padding: 0; } .nav li { display: inline; position: relative; list-style: none; } .nav li a { display: inline-block; color: white; font-family: 'helvetica_now_text_black','Raleway', sans-serif; font-size: 24px; transition: all 0.3s; transform: scale(0.8); opacity: 1; -webkit-text-stroke: 0.8px black; white-space: nowrap; min-width: 3em; text-align:center; } .nav li a:hover { color: white; transform: scale(1.2); opacity: 0.5; } .nav li ul { display: none; } .nav li:hover ul { z-index: 99999; display: block; position: absolute; top: 100%; right: 0; }Pour info, le slidein ne "fonctionne" plus.
Merci pour ton aide ;)
Bon week-end !
