Sous menu horizontal aligné à droite

Bonjour,

J'ai un menu du type:
<ul>
<li>Rub1</li>
<li>Rub2</li>
<li>Rub3
<ul>
<li>ssrub1</li>
<li>ssrub2</li>
<li>ssrub3</li>
</ul>
</li>
<li>Rub4</li>
</ul>

J'aimerais que mon menu et mon sous menu soient aligné à droite.
Pour le menu pas de problème, j'utilise display:block et float:right

Par contre pour le sous menu, ssrub1 s'affiche sous Rub3, et les éléments suivant à droite de ssrub1.

Le nombre de sous rubriques est variable, je ne peux pas applique un margin-left negatif pour caler a droite le sous menu.
Je n'arrive pas à aligner les sous rubriques à droite.

Quelqu'un a t'il déjà eu ce problème?
Merci.

Bonsoir,

Je ne suis pas sûr d'avoir très bien saisi le problème. Peux-tu me dire si ce schéma résume bien ta situation ?



S'il s'agit bel et bien de cela, la raison est simple : le sous-menu représenté par l'imbrication d'un <ul> au sein d'un <li> du menu principal, se positionne en fonction de de ce dernier qui est son parent. De ce fait, il va falloir sortir ce <ul> du flux en utilisant le positionnement absolu.



Ce n'est peut-être pas très clair comme explication. Si tu confirmes qu'il s'agit bien de ce problème je pourrais poster un bout de code réalisant cet effet.

En attendant, bonne nuit !

Oui c'est bien cela.

Mais en utilisant le positionnement absolu, je n'arrive pas à aligner le sous menu à droite.
J'arrive à le positionner en lui mettant un margin-left négatif, mais pour cela il faut connaitre le nombre de sous rubriques
Dans mon cas, le nombre de sous rubriques n'est pas défini à l'avance. J'aimerais aligner le sous menu à droite quelque soit le nombre de sous rubrique.

Merci.

HTML :

<ul id="menu">
	<li><a href="#">Rub1</a></li>
	<li><a href="#">Rub2</a></li>
	<li><a href="#">Rub3</a>
	<ul>
		<li><a href="#">ssrub1</a></li>
		<li><a href="#">ssrub2</a></li>
		<li><a href="#">ssrub3</a></li>
	</ul>
	</li>
	<li><a href="#">Rub4</a></li>
</ul>

CSS :

ul#menu, ul#menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul#menu {
	float: right;
	position: relative;
}

ul#menu li {
	float: left;
	text-align: center;
}

ul#menu li + li {
	margin-left: 2px;
}

ul#menu a {
	width: 50px;
	line-height: 30px;
	display: block;
	background-color: green;
}

ul#menu > li > a {
	width: 100px;
	line-height: 50px;
	background-color: red;
}

ul#menu ul {
	position: absolute;
	right: 0;
	top: 52px; /* la hauteur du "menu principal" + 2px de d'écart */
}

Merci !!!