Menu Horizontal à doite et Sous Menu Horizontal à gauche

Bonjour,

Je cale depuis plusieurs heures sur un soucis. Comme une image parle plus que tout je vous joins le rendu final à obtenir.

http://img269.imageshack.us/img269/4915/exportqm.jpg

Je voudrais réaliser cela uniquement avec du css (si possible), mais surtout fonctionnel sur IE7.0 et +, FF3.5 et +, Safari, Chrome et Opera.
(sauf pour les radius-border)

J'ai réussi avec le code suivant:

div#menu {
	position:relative;
	width:100%;
	min-height:100px;
	padding:0px;
	margin:0px;
	text-align:right;
}
div#menu ul.menu {
	position:absolute;
	margin:0px;
	padding:0px;
	top:0px;
	right:0px;
	list-style:none;
}
div#menu ul.menu li {
	float:left;
	background-color:#41281b;
	margin:0px;
	margin-right:-3px;
	padding:0px;
	
	/*CSS3*/
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}
div#menu ul.menu a {
	position:relative;
	background:url(../img/menu_fond.jpg) right top no-repeat;
	display:block;
	float:left;
	height:60px;
	line-height:60px;
	padding:0px 40px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	color:#FFF;
	
	/*CSS3*/
	-moz-border-radius-topright: 20px;
	border-top-right-radius: 20px;
}
div#menu ul.menu li:last-child {
	margin-right:0px;
}
div#menu ul.menu li.current a {
	background:none;
	background-color:#3eb6ea;
}

// Corection taille premier menu
	var ul_size = jQuery("#menu ul").width();
	var li_size = jQuery("#menu ul li:first-child").width();
	jQuery("#menu ul li:first-child").width(li_size + 980 - ul_size);
	jQuery("#menu ul li:first-child a").width(li_size + 980 - ul_size - 80);

J'obtiens :
http://img841.imageshack.us/img841/909/serverdevcornestone.jpg

C'est assez loin du but et je ne bute que sur le menu, même pas sous menu...

Petit présicion mais important, ce sont des menus totalement dynamique sous le CMS Joomla!, sinon serait été trop facile

Merci de votre aide !!
Modifié par dutom007 (13 May 2011 - 14:38)

Bonjour,

Quelques pistes:

- Si tu as une structure de listes imbriquées pour ton menu (ou de DIV imbriqués pour rubrique / sous-menu), tu auras sans doute intérêt à utiliser le sélecteur d'enfant pour bien maitriser la portée de tes styles. Je ne te fais pas l'injure de rappeler que ça peut s'écrire ul.menu > li > a par exemple.

- Je dirais qu'il faut reproduire, en termes de positionnement, quelque chose qui se rapproche de ce que tu as visuellement: chaque lien passe en-dessous du lien qui le précède. Donc ça veut dire que tes liens peuvent avoir un padding-left d'environ 30px, et que tu joueras sans doute sur du z-index (pour contrôler l'empilement) et sur une marge négative (au niveau des LI) pour obtenir le bon positionnement.

dutom007 a écrit :
Pour la deuxième, le nombre de menu peut varier, ainsi que le contenu et donc la taille. Comment "CSSiser" ça ?

Pour l'essentiel, en évitant de déclarer des width inutiles.

dutom007 a écrit :
Sachant que chaque menu à un fond dégradé

Image de fond.

dutom007 a écrit :
une taille différente

Ne pas figer la largeur. Utiliser un mode de rendu ou un positionnement qui fait que l'élément se comporte comme un bloc tout en prenant la largeur du texte (plus éventuel padding): float:left, ou bien display:inline-block. Ma préférence irait au deuxième ici (avec alignement à droite grâce à un text-align:right sur le parent).

dutom007 a écrit :
que le menu actif est bleu

Comment appliquer des styles spécifiques à la page en cours dans un menu ?

dutom007 a écrit :
(à partir du bord gauche pour le premier)

Là il va falloir ruser en rajoutant en plus une classe sur le conteneur par exemple. Faire que le premier item prend toute la largeur restante en partant de la droite, ça va être pas mal compliqué je pense. Ou alors il faut tenter d'utiliser display:table-cell avec des largeurs faibles sur la plupart des items et très large sur le premier... ça peut marcher, mais compatible IE8+ (pas IE7) et ça va gêner pour créer des superpositions d'éléments.