Menu déroulant

Cainzer Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -  
Cainzer Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Je voudrais actuellement faire un menu déroulant pour mon site web. Je me suis renseigné sur le site du zéro :
http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Je comprend l'ensemble, c'est à dire le CSS et le HTML, mais l'auteur de ce tutoriel dit qu'il faut mettre du javascript. Or, je n'ai aucune connaissance en javascript. Pourriez s'il vous plaît me dire si il existe une possibilité de faire sans javascript ou bien pourriez vous m'en expliquer le principe.
Merci d'avance.

2 réponses

Réponse 1 / 2
manelsousse Messages postés 59 Date d'inscription   Statut Membre Dernière intervention  
 
Essayez ca:
voici le code:<div class="MenuTop">
<ul>
<li><a href="index.php" style="background-image:url(images/bg_menuprcpl_current.png)" >Accueil</a></li><ul><li>sous_menu1<li><ul>
<ul></div>
et voici la feuille de style:
.MenuTop {
font-family: Tahoma;
font-size: 10px;
font-weight: normal;
color: #999999;
height:30px;
white-space:nowrap; /*IE hack*/
border:none;
width:1000px;
}
.MenuTop ul {
list-style-type:none;
padding:0;
margin:0;
}
.MenuTop ul li {
list-style:none;
display:block;
float:left;
height:30px;
line-height:38px;
font-family:Tahoma;
letter-spacing:1px;
font-weight: lighter;



z-index:auto !important;
z-index:1000;
font-size:10px;

}
.MenuTop ul li.last {
float:left;
z-index:auto !important;
z-index:1000;
font-size:10px;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;


}
.MenuTop ul li a {
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 17px 0 18px;
text-decoration:none;
font-weight:bold;
color:#fff;



}
.MenuTop ul li ul {
display:none;
border:none;
}
.MenuTop ul li:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li.last:hover {
position:relative;
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
}
.MenuTop ul li:hover a {
color:#FFF;
}
.MenuTop ul li:hover ul {
display:block;
width:10.0em;
position:absolute;
z-index:999;
top:30px;
/*margin-top:1px;*/
left:0;
}
.MenuTop ul li:hover ul li a {
white-space:normal;
display:block;
width:160px;
height:auto;
line-height:18px;
margin-left:-1px;

border-left:1px solid #CCC;
border-bottom:1px solid #CCC;
border-right:1px solid #CCC;
background-color:#EAEAEA;
font-weight:normal;
font-size:11px;
color:#000;
}
.MenuTop ul li:hover ul li a:hover {
background-color:#FFF;
text-decoration:none;
}



#rubrique_actif {
background:url(../images/bg_menuprcpl_current.png) repeat-x left;
color:#FFF;
margin-left:1px !important;
padding:0 25px;
padding:0 5px 0 5px;
}



.MenuTop table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
}









.MenuTop ul li ul li a {
text-align:left;
}
.MenuTop ul li a:hover ul li a {
white-space:normal;
display:block;
width:130px;
height:1px;


line-height:18px;
padding:4px 16px 4px 16px;
border-left:solid 1px #CCC;
border-bottom:solid 1px #CCC;


background:none;
background-color:#EAEAEA;
font-weight:normal;
color:#333;
}
.MenuTop ul li a:hover ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;

}
.MenuTop ul li ul li a:hover {
background:#FFF;
background-color:#FFF;
text-decoration:none;


}
0
Réponse 2 / 2
Cainzer Messages postés 256 Date d'inscription   Statut Membre Dernière intervention   56
 
Merci mais je voudrais que le sous menu défile au passage de la souris. Et c'est ça qui pose problème et qui nécessite normalement du javascript. Ou est-ce que j'ai tous simplement mal formé la formule que manelsousse m'a donné ?
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
accéder au menu caché
Kabos -
Andy31200 -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses