28172 sujets

CSS et mise en forme, CSS3

[Resolu] Menu et sous menu

Bonjour,
avant de me jeter la pierre, j'ai regardé sur le forum et j'ai pas trouvé de tuto ou de sujet relatant mon problème (ou du moins qui répond à mon problème)

je veux créer un menu (composé de 4éléments) de type inline . ces derniers s'alignent bien horizontalement.
upload/24999-debut.png

Or, je mets des sous menus à ses menus, mais là ca me casse l'alignement !


voici mon code complet si vous voulez


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>PageMenuDeroulant</title>
<link rel="stylesheet" type="text/css" href="css/MenuDeroulant.css" />
</head>
<body>

<div class="menu">
	<ul class="enligne">
		<li>item 1</li>
		<li>item 2</li>
		<ul class="sousmenu">
			<li>item 2.1</li>
			<li>item 2.3</li>
		</ul>
		<li>item 3</li>
		<ul class="sousmenu"></li>
			<li>item 3.1</li>
			<li>item 3.2</li>
			<li>item 3.3</li>
		</ul>
		
		<li>item 4</li>
</div>

</body>
</html>


mon css

.menu li{
display:inline;
}
.sousmenu li{
display:block;

}


upload/24999-fin.png


Voilà en espérant d'être assez claire

je veux que mes sous menu sous sous mes menus
Modifié par Wamdeus (12 Feb 2010 - 14:09)
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
Ta structure n'est pas la bonne puisque tes <ul> doivent être dans un <li> ( liste imbriquée ). Je n'ai pas vérifié mais je suis sur que si tu valide ton code, ça ferait des erreurs.

De plus, il est normal qu'un bloc dans un inline fasse afficher celui-ci en bloc. Si tu veux annuler cet effet, il te faut un positionnement absolu. Cependant, il y a une raison pour que ton menu soit en display:inline ? Tu pourrais très bien laisser les <li> en bloc et utiliser le float:left. Ce qui m'apparaîtrait plus logique.


<div class="menu">
  <ul class="enligne">
    <li><a href="#">item 1</a></li>
    <li> <a href="#">item 2</a>
      <ul class="sousmenu">
        <li>item 2.1</li>
        <li>item 2.3</li>
      </ul>
    </li>
    </li>
    <li> <a href="#">item 3</a>
      <ul class="sousmenu">
        <li>item 3.1</li>
        <li>item 3.2</li>
        <li>item 3.3</li>
      </ul>
    </li>
    <li><a href="#">item 4</a></li>
  </ul>
</div>




.menu li {
	display:inline;
	position:relative;
}
.sousmenu {
	position:absolute;
	top:10px;
	left:-30px;
	display:none;
}
ul li:hover .sousmenu{ display:block; }


Ça ne fonctionnera pas dans IE6 car la pseudo-class :hover ne fonctionne que sur les liens dans IE6. Cependant, si ton site est bien fait, tu devrais avoir accès à tes sous-contenus ( sous-menu ) avec les liens item 1, 2, 3.

Donc visuellement ca marche pas mais on ne brime pas l'utilisateur de IE6 sur le contenu et ça, ça m'apparaît pas si grave Smiley smile

Espérant avoir répondu à ta question !
C'est impeccable ça !!
Pile poil ce que je voulais en plus!
En fait, j'ai suivi le tuto proposé par alsacréation sur le menu déroulant avec le Jquery et je me suis dit, et si on faisait pareil avec un menu horizontale ... bah voilà, ca m'ap osé un peu plus de problème ^^

c'est vrai qu'en utilisant le float:left c'est super.
J'avais pensé à mettre les item en absolute, mais cette idée m'est sortie de la tête (et oui il commençait à faire faim ...)
Un grand merci à toi !!
Sujet clos
Aller à