D'abord,

Bonjour a tous, je me presente, je suis Rondo.

Grace a ce magnifique site, je suis en train comme beaucoup de me creer le mien.

Seulement voila: J'ai une idee tres precise de ce que je veux faire avec mes menus, simplement la realisation s'avere beaucoup plus difficile que je ne l'imaginais. (ou du moins, je n'ai toujours pas trouve le moyen de faire ce que je voulais...)

J'ai donc besoin d'aide -si possible- pour l'idee suivante:

J'aimerai un mix entre ce qui semble s'appeler une "vertical bouttons list" et une "pop open list".
Visuellement voila ce que je cherche:

Item A
Item a
Item b
Item c
Item B
Item C

Lorsque je "glisse" sur les items a, b, c qu'ils prennent la couleur de fond des items A, B, C.

Non seulement ca, (ce a quoi, je parviens je vous donne les codes a la fin pour plus de clarte) mais (et c'est la ou ca coince ):

j'aimerai que le fait de glisser sur les items a, b, c ouvrent les sous-menus 1, 2, 3. Et pas n'importe comment!

Bien aligne a droite cote a cote:
Item A
Item a Item 1
Item b Item 2
Item c Item 3
Item B

Et que de la meme maniere leur fond devienne identique a ceux de l'item A quand on passe dessus.
(un peu comme le menu "Demarrer" de window en fin de compte...)


Je vous remercie infiniment de votre aide, et de votre patience.
(c'est un long message, mais tant qu'a demander de l'aide, je prefere essayer d'etre le plus clair possible.)


Voici donc le model de base suivi du seul code de "pop open" que j'ai pu trouver.


Vertical boutton list (mon modele de base donc, auquel je veux ajouter une option pop open)


HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

CSS
#navcontainer
{
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
text-transform: lowercase;
}

ul#navlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li
{
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

Si ca aide, voici le Pop Open List

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
#navlist
{
list-style-type: none;
color: darkgray;
background-color: gainsboro;
margin-left: 5px;
}

#active:hover li { display: block; }
#active li { display: none; }

#navcontainer
{
width: 220px;
background-color: gainsboro;
border: 1px gray solid;
}

#navcontainer a
{
color: gray;
background-color: gainsboro;
width: 120px;
display: block;
}

#navcontainer a:visited
{
color: gray;
background-color: gainsboro;
}

#navcontainer a:active
{
color: white;
background-color: gray;
}

#navcontainer a:hover
{
color: white;
background-color: gray;
}
</secret>

Merci a tous ceux qui ont jete un cop d'oeil pour essayer de m'aider.

J'ai trouve m'a reponse tout seul finallement sur un site anglais.

Voici l'astuce:


#navcontainer li
/* make the list elements a containing block for the nested lists */
{
position: relative;
}

#navcontainer ul ul

{