[Problème] Menu déroulant : "display block" sur le lien d'origine de sous liste

[fonkytur]

Bonjour,

Dans le cadre d'un menu déroulant en css, je rencontre le problème suivant :

> lors du survol du lien de premier niveau, une image de fond "if1" apparait.
Dans le même temps, les sous-liens apparaissent, avec if1 dans leur fond.

Jusque là tout est ok.

> ensuite, si je déplace mon curseur sur un des éléments de sous menu, if1 disparaît du fond du lien de premier niveau.
C'est mon problème.

Ca ne fait ni très propre ni très sérieux.

Bref, quoi dois-je ajouter, et à quel niveau ?

Merci d'avance !

/**********TOPMENU************/
 #topmenu{
float:left;
width:100%;
height:66px;
background: url(../images/bg-menu.jpg) repeat-x;
margin:0;
text-align:center;

} 

/*Menu Top*/
 #navigation ul {
list-style: none;
margin: 0;
padding: 0px;

}

#navigation {
float:left;
width:920px;
height:66px;
background:transparent;
text-transform: uppercase;
z-index: 50;

}

#navigation a {
display: block;
float: left;
height: 22px;
padding:23px 15px 20px 15px;
margin:0 2px;
font-weight:bold;
color:#fff;
font-size:11px !important;
letter-spacing:1px;
background: transparent;

}

#navigation  a:hover{
color:#fff;
background: url(../images/bg-nav.jpg) repeat;

}

#navigation li {
display: block;
float: left;
margin: 0;
padding: 0;

}

#navigation li li a {
padding:15px 0;
color:#fff;

}

#navigation li li {
border-top: 1px solid #fff;

}

#navigation li.active  {
background: url(../images/bg-nav.jpg) repeat;

}

.nav, .nav * {
margin:0;
padding:0;

}

.nav{
line-height:1.0;
float:left;
margin-bottom:1.5em;
position: relative;
z-index:10;

}

.nav ul {
background:#febf01;
padding: 0;
z-index:10;

}

.nav li {
float:left;
list-style:none;
position:relative;
background:none;
display:block;

}

.nav li li a {
display:block;
padding: 0;
text-decoration:none;
float:none;
width:177px;

}

#navigation li:hover li,
#navigatin li.sfHover li,
#navigation li.active:hover li,
#navigation li.active.sfHover li,
#navigation li:hover li span,
#navigation li.sfHover li span {
background: url(../images/bg-nav.jpg) repeat;
display:block;

}

#navigation li:hover li a,
#navigation li.sfHover li a,
#navigation li.active:hover li a,
#navigation li.active.sfHover li a {
color:#fff;
display:block;
}

#navigation li:hover li a:hover,
#navigation li.sfHover li a:hover,
#navigation li.active:hover li a:hover,
#navigation li.active.sfHover li a:hover {
color:#000;
display:block;
}

.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 183px;
z-index: 5;
display:block;

}

.nav li:hover ul,
.nav li.sfHover ul {
left:2px;
top: 60px;
display:block;
}

.navli:hover li ul,
.navli.sfHover li ul,
.nav li li:hover li ul,
.nav li li.sfHover li ul,
.nav li li li:hover li ul,
.nav li li li.sfHover li ul {
top:-999em;
left:2px;

}

.nav li li:hover ul,
.nav li li.sfHover ul,
.nav li li li:hover ul,
.nav li li li.sfHover ul,
.nav li li li li:hover ul,
.nav li li li li.sfHover ul {
left: 180px;
top:0px;
width: 183px;

}

.nav li li {
position: relative;
float:none;
width: 183px;

}

[lefabdu51]

Re : Menu déroulant : "display block" sur le lien d'origine de sous liste

.nav li ul {
float:none;
left:-999em;
position:absolute;
width: 183px;
z-index: 5;
display:block;
}

Ca c es ta liste concernant le second niveau de menu. A toi de reproduire la ligne avec l'image que tu souhaites en fond.
Tu la recopies aux bons endroits.