Sous menu horizontal

Bonjour,

J'ai un menu horizontal comme ceci:

<ul>
    <li>Rub1
      <ul>
          <li>ssrub1</li>
          <li>ssrub2</li>
      </ul>
    </li>
    <li>Rub2
      <ul>
          <li>ssrub1</li>
          <li>ssrub2</li>
      </ul>
    </li>
    <li>Rub3</li>
    <li>Rub4</li>
    <li>Rub5
      <ul>
          <li>ssrub1</li>
          <li>ssrub2</li>
      </ul>
    </li>
</ul>

Les sous menus s'affichent lors du passage de la souris.
J'aimerais que les sous menus s'affichent toujours sous le menu.
Le problème se pose lorsque l'on veut afficher le sous menu de la rubrique 5, il dépasse sur la droite.
J'aimerais qu'il reste positionné sous le menu principal, comme l'image ci-dessous.



Merci.
Modifié par joclickou (10 Oct 2011 - 12:03)

Salut donne le code CSS, s'il te plaît.

HTML

<div style="margin:auto; width:700px; border:solid 1px blue;">
<div id="menu_haut"> 
    <ul class="menu">
        <li><a href="" >Rubrique 1</a>
        	<ul>
                <li><a href="">sousrub11</a></li>
                <li><a href="">sousrub12</a></li>
            </ul>
        </li>
        <li><a href="" >Rubrique 2</a>
        	<ul>
                <li><a href="">sousrub21</a></li>
                <li><a href="">sousrub22</a></li>
            </ul>
        </li>
        <li><a href="" >Rubrique 3</a></li>
        <li><a href="" >Rubrique 4</a></li>
        <li><a href="" >Rubrique 5</a>
        	<ul>
                <li><a href="">sousrub51</a></li>
                <li><a href="">sousrub52</a></li>
            </ul>
        </li>
    </ul>      
</div>
<div style="clear:both;"></div>
</div>  

CSS

#menu_haut{
	float:right;
	margin-top:40px;
	font-size:12px;
}
ul.menu, ul.menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.menu {
	float: right;
}
ul.menu li {
	float: left;
	text-align: center;
	background-color:#5dd8e6;
}
ul.menu a {	
	display: block;
}
ul.menu > li > a {
	line-height: 35px;
	padding:0px 8px 0 8px;
}
ul.menu ul {
	display:none;
	position: absolute;
}	
ul.menu li:hover ul{
	display:block;
}
ul.menu ul li{
	position:relative;
	float:right;
	background-color:#f9e8b3;
}
ul.menu li ul a{
	padding:0px 8px;
	padding-top:9px;
}

Coucou,


Cela vient de tes sélecteurs d'enfants:

ul.menu > li > a {

	line-height: 35px;

	padding:0px 8px 0 8px;

}

la solution peut être de donner une class à ton "a" concerné, pour le menu 5 et de corriger le padding en lui ajoutant un !important pour écraser le poids du sélecteur précédent.
Modifié par jmlapam (10 Oct 2011 - 14:32)

En fait, le menu css va être intégré à un CMS, le nombre de sous rubriques n'est pas défini à l'avance et je ne peux pas différencier les id ou les classes du dernier menu.
Il faudrait que si les sous-rubriques dépassent sur la droite, elles soient alignées à droite.

Je n'ai toujours pas trouvé de solution, quelqu'un a déjà eu affaire à ce cas??
Merci.

Bonjour,

La pseudo-classe :last-child n'étant pas supportée par IE 7-8 (support dans IE9+ uniquement), il te faudrait une classe sur le dernier LI de premier niveau. Si tu n'as pas la maitrise du code HTML, peut-être l'ajouter en JavaScript?

Plus largement, si tu as 5 éléments dans un sous-menu, même le sous-menu pour ta troisième rubrique va dépasser allègrement à droite. Donc gérer uniquement le cas du dernier sous-menu ne suffira sans doute pas.

Quelques solutions:
1. S'amuser à détecter en JavaScript la largeur du sous-menu et l'espace disponible, et placer le sous-menu en fonction. Problèmes: complexe à mettre en œuvre, positionnement qui risque de sembler aléatoire à l'utilisateur.
2. Aligner tous les sous-menus tout à gauche. Problème: le parcours de la souris depuis un intitulé de rubrique jusqu'à un item de sous-menu sera très souvent en diagonale et passera par dessus un intitulé de rubrique différent, ce qui mettra le bazar.
3. Ne pas faire de menu déroulant activé au survol, avec sous-menu horizontal. C'est juste une connerie ergonomique sans nom. (Pour la petite histoire, lemonde.fr avait un menu de ce type, c'était la merde, et ils sont passés à un menu déroulant beaucoup plus ergonomique depuis.)

Merci pour ces infos !!