Une dropline bien embêtante

Bonjour à tous,

Je rencontre un problème dans la réalisation d'un menu divisé en 3 parties :
- Les titres principaux sont disposés horizontalement
- un premier sous-menu apparait sous-forme de drop-line dès qu'un titre est survolé
- enfin, une liste déroulante apparait dès lors qu'un élément du sous-menu est également survolé.

J'ai donc une structure qui est la suivante

<div class="menu">
  <ul>
    <li><a href="#">Titre</a>
      <ul>
        <li> <a href="#">Sous-Titre</a>
          <ul>
            <li class><a title="" href="#">Sous-sous-Titre</a></li>
            <li class><a title="" href="#">Sous-sous-Titre</a></li>
            <li class><a title="" href="#">Sous-sous-Titre</a></li>
          </ul>
        </li>
        <li > <a href="#">Sous-Titre</a>
          <ul>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Titre</a>
      <ul>
        <li> <a href="#">Sous-Titre</a>
          <ul>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
          </ul>
        </li>
        <li> <a href="#">Sous-Titre</a>
          <ul>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
            <li><a title="" href="#">Sous-sous-Titre</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Pour certaines raisons, j'ai choisi que ce menu apparaisse tout en haut du site et qu'il couvre toute la largeur de l'écran :

Cela fonctionne très bien pour le 1er niveau, j'ai une barre noire qui couvre bien tout l'écran en noir et mes titres se posent bien au milieu

Le problème est le second niveau (les sous-titres). Pour les détacher, j'ai choisi de les placer sur un fond rouge. Or, ce fond ne s'applique qu'à la largeur du menu (1230px) que j'ai bien été obligée de fixer dans ma classe. Il ne couvre pas la largeur de l'écran comme c'est le cas au 1er niveau.

Ma question est simple : comment faire pour que la dropline (le 2nd niveau) ait un fond qui couvre 100% de la largeur de l'écran ? Je sèche totalement là-dessus, et je me demande si la méthode utilisée me permet d'atteindre le résultat voulu ? Je vous joint la feuille de style :

.menu {
	height:30px;
	background:#000;
	position:relative;
	font-family:Arial, Tahoma, Helvetica, sans-serif;
	z-index:10;
	max-width:1230px;
	margin: 0 auto;
}
.nocurrent {
	z-index:30;
}
.homecurrent {
	z-index:20;
}
.menu ul {
	padding:0;
	margin:0;
	list-style:none;
}
.menu > ul {
	float:left;
}
.menu > ul > li {
	float:left;
}
.menu > ul > li > a {
	display:block;
	color:#fff;
	line-height:31px;
	background:transparent;
	text-decoration:none;
	text-transform:uppercase;
	padding:0 7px 0 7px;
	font-size:13px;
}
.menu > ul > li > a b {
	display:block;
	background:transparent;
	padding:0 20px 0 10px;
	font-weight:normal;
}
.menu > ul > li > ul {
	width:100%;
	position:absolute;
	top:30px;
	left:-9999px;
	height:30px;
	background:#be0e0e;
	opacity:0;
}
.menu > ul > li > ul > li {
	float:left;
	position:relative;
}
.menu > ul > li > ul > li > a {
	display:block;
	color:#fff;
	line-height:30px;
	text-decoration:none;
	padding:0 10px;
	font-size:14px;
}
.menu > ul > li > ul > li > ul {
	position:absolute;
	left:-9999px;
	top:25px;
	background:#fff url(images/menu/pointer.gif) no-repeat 0 0;
	padding:10px 0 10px 0;
	border:1px solid #000;
	border-top:0;
	border-radius:0 0 5px 5px;
	min-width:150px;
	box-shadow:0 3px 5px rgba(0, 0, 0, 0.4);
	-moz-transform: scaleY(0);
	-ms-transform: scaleY(0);
	-o-transform: scaleY(0);
	-webkit-transform: scaleY(0);
	transform: scaleY(0);
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
	-o-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	transform-origin:0 0;
}
.menu > ul > li > ul > li > ul > li > a {
	display:block;
	color:#000;
	text-decoration:none;
	padding:3px 10px;
	white-space:nowrap;
	font-size:14px;
}
.menu > ul > li:hover > a {
	color: #fff;
	text-decoration: none;
	background-color: #be0e0e;
	-webkit-border-top-right-radius: 2px;
	-moz-border-radius-topright: 2px;
	border-top-right-radius: 2px;
	-webkit-border-top-left-radius: 2px;
	-moz-border-radius-topleft: 2px;
	border-top-left-radius: 2px;
}
.menu > ul > li:hover > a b {
	background:url(images/menu/border-right.gif) no-repeat right top;
}
.menu ul li:hover {
	direction:ltr;
}
.menu > ul > li:hover > ul {
	left:0;
	opacity:1;
}
.menu > ul > li > ul > li:hover > a {
	color:#fff;
	text-decoration:underline;
	font-size:14px;
}
.menu > ul > li > ul > li:hover > ul {
	left:0px;
	top:30px;
	-moz-transform: scaleY(1);
	-ms-transform: scaleY(1);
	-o-transform: scaleY(1);
	-webkit-transform: scaleY(1);
	transform: scaleY(1);
}
.menu > ul > li > ul > li > ul > li > a:hover {
	background:#000;
	color:#fff;
}
.close {
	position:absolute;
	right:10px;
	bottom:80px;
	display:none;
}

Merci de votre aide !

Eva
Modifié par Eva (12 Jun 2013 - 22:06)

Bonjour,

J'avoue avoir survolé l'ensemble d'un œil distrait (je sais, ce n'est pas bien ), mais j'ai deux excuses :
- Une page en ligne nous permettrait de mieux visualiser votre soucis sans se perdre dans un pavé de code indigeste
- Les menus déroulants, c'est le mal

Plus sérieusement :
- Comment fonctionne la propriété CSS z-index ?
- Je ne sais pas quel est votre besoin de rétrocompatibilité, mais ce type de menu risque de poser quelques soucis à certains navigatausorus, et probablement quelques problèmes d'accessibilité, d'utilisabilité et d'ergonomie.
Ceci étant dit, et d'une manière générale, une surcouche JavaScript pour gérer ce type de mécanisme (j'ai failli dire horreur ) ce n'est pas plus mal
- Une page en ligne, s'il te plait madame

Je travaille en local, mais voici une image qui effectivement, illustrera mieux le charabia que j'ai écrit.



Le souci, c'est donc la zone rouge, que j'aimerais étendre sur toute la largeur de l'écran, mais qui veut pas . Normal, "elle se cale sur la largeur du menu" me direz-vous ! Oui je sais !
J'ai beau chercher, je ne trouve pas de solutions.

Merci

Avec quel navigateur s'il vous plait ?

Parce que j'avais collé votre code sur Jsfiddle "d'un oeil distrait" aussi, et j'obtenais 2 menus de même taille

J'avais ensuite viré le max-width dont je ne comprenais pas l'utilité puisque des éléments block prennent automatiquement la largeur totale et que j'ai cru comprendre que c'était ce que vous vouliez...

Euh, et bien je travaille sous Chrome, et je viens de vérifier sous IE 9 également. Pour les 2 navigateurs, j'ai le même souci avec cette barre rouge.

Je viens de vérifier sous Jsfiddle et effectivement les 2 premiers niveaux sont de même longueur. Le max-width est issu d'un test et s'est un peu incrusté lors du copier-coller, mais je ne pense pas que çà change fondamentalement le problème ?

Désolé, je dois être un peu fatigué mais :

a écrit :
Je viens de vérifier sous Jsfiddle et effectivement les 2 premiers niveaux sont de même longueur.

C'était bien ça qui posait problème non ?

Donc si je résume : sur jsfiddle ça marche, et pas en local ?

(me va rentrer se coucher)

C'est çà Manhattan

Sous Jsfiddle, les 2 niveaux de menu sont de largeur identiques et ne couvrent pas toute la largeur. En local, le 1er niveau prend bien toute la largeur, le 2nd niveau semble se limiter à la taille définie dans la classe "menu"

Un p'tit café ?
Modifié par Eva (12 Jun 2013 - 17:16)

Bon

Première idée : en local, il y a du css en plus qui se balade quelque-part que l'on ne copie pas sur jsfiddle et qui modifie le comportement des balises.

Euh, première et seule idée pour l'moment

Edit : mais sans le max-width, ils prennent toute la largeur non sur jsfiddle ?

Earl grey please.

Collez un lien vers jsfiddle et les pros du CSS dont je ne fais pas partie vont trouver ça sans problème
Modifié par Manhattan (12 Jun 2013 - 17:20)

Il y a du css en plus mais je peux garantir qu'il n'interfère pas.

Maintenant, si je supprime la largeur dans la classe "menu" (ce que je viens de tester), mes 2 lignes sont identiques et couvrent bien l'ensemble de la largeur. Seul hic, ce n'est plus centré...

Voici le lien vers Jsfiddle : http://jsfiddle.net/u58Zz/1/
Modifié par Eva (12 Jun 2013 - 17:22)

Ca me parait logique. Si vous souhaitez des menus centrés sur 2 barres faisant toute la largeur, il va falloir passer par un container de taille fixe avec margin auto, la div en l’occurrence.
Mais ça casse un peu votre code.
A moins que quelqu'un d'autre ne trouve une autre méthode.

Je suis désolée, je vois mal comment je peux gérer ces listes imbriquées avec des containers de type div ? Ma maitrise des CSS est plutôt limitée Je veux bien des éclaircissements ou un exemple précis, si vous avez çà en magasin...

Merci