Centrer un sous menu

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.

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 !