Menu à gauche + espacement menu

Bonjour,

J'ai un problème d'affichage en css

    
<div class='gauche'>
      <ul class='nav_vertical'>
        <li>Accueil</li>
        <ul class='nav_2'>
          <li>Présentation</li>
          <li>Nos services</li>
          <li>Contact</li>
        </ul>
      </ul>
      <ul class='nav_vertical'>
        <li>Services</li>
        <ul class='nav_2'>
          <li>Maintenance</li>
        </ul>
      </ul>
      <ul class='nav_vertical'>
        <li>Développements</li>
        <ul class='nav_2'>
          <li>Autocad</li>
          <li>Microstation</li>
          <li>Site internet</li>
        </ul>
      </ul>
    </div>

.contenu .gauche {
	width: 160px;
	float: left;
	display: inline;
	background-color: Red;
}

.nav_vertical li {
	display: inline;
	margin: 0;
	padding: 2;
	list-style-type: none;
	float: right;
	text-align: right;
	border: 1px solid #867047;
	background-color: Lime;
	width: 150px;
	padding-right: 5px;
	position: relative;
}

.nav_2 li {
	left: 160px;
	top: -1em; 
	/* width: 400px; */
	position: relative;
	background-color: Fuchsia;
	text-align: left;
	visibility: hidden;
	padding-left: 5px;
}

.nav_vertical:hover li {
	visibility: visible;
}

.nav_vertical li:hover, .nav_2 li:hover {
	background-color: Aqua;
}

Mon problème est que l'espacement dans le menu (Accueil, Services, Développement) est différent, actuellement cela dépend du nombre de ligne dans le sous menu.

Je souhaite avoir un même espacement (ou imposer l'espacement)

Merci

Patch

Salut,

Tes éléments ul.nav_2 doivent être en position:absolute pour que les éléments suivants ne soient pas décalés vers le bas.

Bonjour,

Agylus a écrit :
Salut,

Tes éléments ul.nav_2 doivent être en position:absolute pour que les éléments suivants ne soient pas décalés vers le bas.

J'ai essayé, mais rien de concluant, où écrire ul.nav_2 {position:absolute;}

Merci

Patch

Bonjour,

Ton code HTML n'est pas vraiment correct : une liste ul avec un seul élément li n'est pas une liste mais un paragraphe et devrait être balisé avec <p> (ou dans ton cas avec <hn>).

Pour imposer un espacement, il est possible d'utiliser min-height.
Modifié par Laurie-Anne (02 Dec 2010 - 10:35)

Patch a écrit :
où écrire ul.nav_2 {position:absolute;}

A priori juste avant ".nav_2 li {".
Ca devrait fonctionner, mais si tu ne donnes pas d'autres précisions que "mais rien de concluant" on aura du mal à t'aider plus amplement.
Pourrais-tu mettre un exemple de ton problème en ligne ?