[resolu] Pointer les élément d'un menu déroulant vertical

Bonsoir,

Je viens demander (à nouveau) de l'aide pour un menu déroulant. Je commence à me mêler les pinceaux, et un regard neuf me sera bien utile!!!

Voici le résultat auquel j'essaie (en vain) d'arriver:
- le menu déroulant plié
- le menu déroulant déplié

Mon html est comme suit :

<ul id="filter-list">
  <li>voir la liste
    <ul>
        <li>élément 1</li>
        <li>élément 2</li>
        <li>élément 3</li>
        ....
    </ul>
  </li>
</ul>

Mon css est le suivant. Mon problème est que le sous menu se décale automatiquement de 5px sur la gauche. Apparemment, cela reprend les infos ul#filter-list. Bref, j'ai un mal fou à isoler mon titre principal ("voir la liste") et le sous-menu.

#filter-list, ul#filter-list { /* toutes les listes */
  list-style: none;
  line-height: 1;
	cursor:pointer;
	width: 145px; /* largeur obligatoire, sinon opera devient fou */
  color:#FFFFFF; /*white*/
  background: #AEAEA0; /*sand*/
  padding:5px 5px 5px 10px;
	margin:0 20px 0 0;
  border-radius: 10px; 
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#filter-list a {
  display: block;
  width: 160px;
	color:#FFFFFF; /*white*/
	text-decoration: none;
	padding:0;
	margin:0;
}

#filter-list a:hover {
	color:#262624; /*black*/
  text-decoration: none;
  padding:0;
  margin:0;
}

#filter-list ul { /* tous les items de liste */
  float: left;
  padding:0;
  margin:0;
}

#filter-list ul li{ /*sous menus*/
	width:145px;
	padding:5px 5px 5px 10px;
	margin:0;
	background-color: #682D0E;
	list-style: none;
  line-height: 1;
}

#filter-list li ul { /* listes de deuxième niveau */
  position: absolute;
	padding: 0;
	margin:0;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
  z-index:1000;	
}

#filter-list li:hover ul, #filter-list li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
	color: #262624; /*black*/
}

Merci de votre aide!!!
PS: je me suis basé sur ce tuto de pompage.net
Modifié par nforum (26 Jan 2010 - 02:15)

Re,

J'ai pu avancer sur le menu, et j'arrive enfin un peu au bout de mes peines.
J'ai encore un souci. Lorsque j'affiche le menu déroulant de mon menu, celui-ci ce supperpose à mon premier li. Ceci est volontaire pou que les coins inférieurs de mon premier li soient à angles droits. Le problème est que le menu dérouland supperpose complètement mon premier li. Pourtant, j'ai utilisé un z-index!

Voici un exemple

#filter-list, #filter-list ul { /* toutes les listes */
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1;
	cursor:pointer;
}

#filter-list a {
  display: block;
	color: #FFFFFF;
	text-decoration:none;
  width: 145px;
}
#filter-list a:hover {
  color: #262624; /*black*/
  text-decoration:none;
}

#filter-list li { /* tous les items de liste */
  float: left;
  width: 145px; /* largeur obligatoire, sinon opera devient fou */
}

ul#filter-list li{ /* listes de premier niveau */
	padding: 5px 5px 5px 10px;
	background: #AEAEA0; /*sand*/
	border-radius: 10px;
	-moz-border-radius:10px;
	z-index:1000;
}/*
ul#filter-list li:hover{
	border-radius: 10px 10px 0 0;
  -moz-border-radius:10px 10px 0 0;
}*/

ul#filter-list li ul { /* listes de deuxième niveau */
  position: absolute;
  background: #123456; /*sand*/
  width: 160px;
	padding-top:10px;
	margin-top:-10px;
	margin-left:-10px;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
  border-radius: 0 0 10px 10px;
  -moz-border-radius:0 0 10px 10px;
	z-index:100;
}

#filter-list li:hover ul, #filter-list li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
}

qqn a une idée comment gérer cette superposition. Merci !

hmm.

apparemment, tout est ok. je viens d'y parvenir. Voici ma solution finale au cas où ça intéresserait qqn.

#filter-list, #filter-list ul { /* toutes les listes */
  color:#FFFFFF;
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1;
	cursor:pointer;
}

#filter-list a {
  display: block;
	color: #FFFFFF;
	text-decoration:none;
  width: 145px;
}
#filter-list a:hover {
  color: #262624; /*black*/
  text-decoration:none;
}

#filter-list li { /* tous les items de liste */
  float: left;
  width: 145px; /* largeur obligatoire, sinon opera devient fou */
}

ul#filter-list li#top-list{
	background: url("../img/arrow.png") center right no-repeat;
	background-color: #AEAEA0; /*sand*/
  border-radius: 10px;
  -moz-border-radius:10px;
	-webkit-border-radius: 10px;
	z-index:2000;
}
ul#filter-list li{ /* listes de premier niveau */
	padding: 5px 5px 5px 10px;
	z-index:1000;
}
ul#filter-list li#top-list:hover{
	border-radius: 10px 10px 0 0;
  -moz-border-radius:10px 10px 0 0;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
}

ul#filter-list li ul { /* listes de deuxième niveau */
  position: absolute;
  background-color: #AEAEA0; /*sand*/
  width: 160px;
	/*padding-top:10px;*/
	margin-top:5px;
	margin-left:-10px;
  left: -999em; /* on met left plutôt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'écran */
  border-radius: 0 0 10px 10px;
  -moz-border-radius:0 0 10px 10px;
	-webkit-border-top-left-radius: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
	z-index:500;
}

#filter-list li:hover ul, #filter-list li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
  left: auto;
}