Bonjour,
J'ai configurer une liste avec une sous liste et rajouté un css pour en faire un menu déroulant. Cependant le sous menu disparait lorsque j'essaye de cliquer dessus, il est juste présent au passage de la souris sur le menu principale. Le menu principale est composé d'image(acceuil, news ...)
Voici mon css:
#menu ul li
{
margin:10px;
float:left;
display:block;
width:150px;
line-height:50px;
text-align:center;
}
#menu ul li ul li
{
background:url(../images/bouton-noir.png) no-repeat;
}
#menu ul li ul
{
display:none;
position:relative;
top:40px;
left:30%;
font-size:120%;
}
#menu ul li:hover ul
{
display:block;
}
#menu li:hover ul li
{
float:none;
}
#accueil
{
position:absolute;
top:-3px;
margin-left:-45px;
height:55px;
width:209px;
}
#accueil:hover
{
background-image:url("../images/accueil.jpg");
background-repeat:no-repeat;
}
#equipes
{
position:absolute;
top:-3px;
margin-left:0px;
height:55px;
width:190px;
}
#equipes:hover
{
background-image:url("../images/equipes.jpg");
background-repeat:no-repeat;
}
#news
{
position:absolute;
top:-3px;
margin-left:29px;
height:55px;
width:130px;
}
#news:hover
{
background-image:url("../images/news.jpg");
background-repeat:no-repeat;
}
Merci de bien vouloir m'aider.
ps : je ne souhaite pas utilisé de doctype.
J'ai configurer une liste avec une sous liste et rajouté un css pour en faire un menu déroulant. Cependant le sous menu disparait lorsque j'essaye de cliquer dessus, il est juste présent au passage de la souris sur le menu principale. Le menu principale est composé d'image(acceuil, news ...)
Voici mon css:
#menu ul li
{
margin:10px;
float:left;
display:block;
width:150px;
line-height:50px;
text-align:center;
}
#menu ul li ul li
{
background:url(../images/bouton-noir.png) no-repeat;
}
#menu ul li ul
{
display:none;
position:relative;
top:40px;
left:30%;
font-size:120%;
}
#menu ul li:hover ul
{
display:block;
}
#menu li:hover ul li
{
float:none;
}
#accueil
{
position:absolute;
top:-3px;
margin-left:-45px;
height:55px;
width:209px;
}
#accueil:hover
{
background-image:url("../images/accueil.jpg");
background-repeat:no-repeat;
}
#equipes
{
position:absolute;
top:-3px;
margin-left:0px;
height:55px;
width:190px;
}
#equipes:hover
{
background-image:url("../images/equipes.jpg");
background-repeat:no-repeat;
}
#news
{
position:absolute;
top:-3px;
margin-left:29px;
height:55px;
width:130px;
}
#news:hover
{
background-image:url("../images/news.jpg");
background-repeat:no-repeat;
}
Merci de bien vouloir m'aider.
ps : je ne souhaite pas utilisé de doctype.