[Résolu] ul imbriqués et border-bottom

Il y a des jours où on tombe sur 12.000 problèmes, je vous jure...

J'ai un menu imbriqué comme ceci

<ul>
<li>Menu 1</li>
  <ul>
    <li>Sous-menu 1</li>
    <li>Sous-menu 2</li>
    <li>Sous-menu 3</li>
  </ul>
<li>Menu 2</li>
<li>Menu 3</li>
  <ul>
    <li>Sous-menu3 1</li>
    <li>Sous-menu3 2</li>
    <li>Sous-menu3 3</li>
  </ul>
</ul>

Dans mon CSS, j'ai appliqué un border-bottom: 1px solid #CCC; sur mes listes.

Ca s'affiche très bien dans FF, mais pas dans IE7. Dans ce dernier, les bordures de Menu 1 ou de Menu 3 s'affichent en-dessous des sous-menus, ce qui me fait donc une double-bordure en-dessous des derniers sous-menus.

Voici un fichier test vite créé pour représenter le problème: http://www.formyact.com/test.htm

Merci d'avance
++
Modifié par Xav1979 (02 Feb 2008 - 14:53)

Attention: les éléments ul et ol ne peuvent contenir comme enfants directs que des li!

Ok, je corrige, sorry pour l'erreur, mais ça ne change rien à mon problème de bordure!

http://www.formyact.com/test.htm


Edit: ah, si, y a du changement, maintenant j'ai le problème de bordure dans FF aussi
Modifié par Xav1979 (02 Feb 2008 - 14:19)

Ton "problème" de bordure est parfaitement logique: tu appliques une bordure inférieure à tous les éléments de liste, ce qui implique une bordure pour les li contenant des ul.
En procédant en sens inverse, tu pourras y parvenir aisément:

ul {width:150px; margin-left:0; padding-left:0}
	
li {margin-bottom:3px; border-top:1px solid #069; display:block;}
	
body > ul {border-bottom:1px solid #069}
	
body > ul li:first-child {border:none}

Salut,

Si tu appliques une bordure aux éléments <li>, il est normal qu'elle s'affiche en dessous du sous-menu (puisque le <li> doit contenir le sous-menu).

Pour contourner le problème, tu as besoin d'un élément en plus, mais j'imagine que ton menu va contenir des liens, ce qui permet de travailler directement dessus (note que ça fonctionne aussi avec des éléments <span>) :

<ul>
  <li>
    <a href="#" title="">Menu 1</a>
    <ul>
      <li><a href="#" title="">Sous-menu 1</a>
      ...
    </ul>
  </li>
  ...
</ul>

li a {
  display: block ;
  border-bottom: 1px solid #ddd ;
}

Edit: grilled par Benjamin par contre, ma solution a l'avantage de fonctionner sous IE6, en principe

Merci à tous les deux! Je m'en suis rendu compte après avoir écrit mon message que, suite à la correction proposée par Benjamin tout au début, le comportement de ma bordure devenait normal

Maintenant, ce n'est qu'une adaptation à faire, je devrais m'en sortir avec vos exemples.

Merci à tous les deux!