Problème de css
catadote
-
catadote -
catadote -
Bonjour,
Je suis entreind de créer un site web. Et j'ai un problème avec un menu déroulant. J'ai fait un menu qui se déroule au passage de la souris mais je veux maintenant que mon menu ne s'affiche avec un clic de souris. Est-ce que quelqu'un aurrait une solution?
Voici mon code:
html
<head>
<style type="text/css">
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li{list-style-type: none; position: relative; width: 140px; height: 30px; background-color: #EEF3F7; padding: 2px; margin: 0px}
#monmenu li li{list-style-type: none; position: absolute; top: -40%; width: 780px; height: 400px; background-color: white; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: white;}
#monmenu li:hover.active {url: ("Accueil.php"); background-color: white;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li.sfhover ul.niveau2{display: block}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
</style>
</head>
<div id="monmenu">
<ul class="niveau1">
<li class="active" style="positon: absolute; top: -50%;"> Qui somme nous?
<ul class="niveau2" style="width: 600px; height: 400px; border: 0px;">
</ul>
</li>
<li> Entreprise
<ul class="niveau2" style="width: 1900px; height: 400px; border: 0px;">
</ul>
</li>
<li> Client
<ul class="niveau2" style="width: 600px; top: -50%; height: 400px; border: 0px;">
</ul>
</li>
</ul>
</div>
</html>
css
<style type="text/css">
ul ul {display: none; position: absolute; left: 344px; height: 900; width: 900; top: -1px; margin:0px; padding: 0px; border: 1px solid black;}
li {list-style-type: none; position: relative; width: 40px; background-color: black; padding: 2px; margin: 0px}
li:hover, li.sfhover {display: block;}
li:hover ul.niveau2, li.sfhover ul.niveau2 {display: block;}
li.plus {background-position:right; background-repeat: no-repeat; border-bottom: 1px solid grey;}
</style>
Je suis entreind de créer un site web. Et j'ai un problème avec un menu déroulant. J'ai fait un menu qui se déroule au passage de la souris mais je veux maintenant que mon menu ne s'affiche avec un clic de souris. Est-ce que quelqu'un aurrait une solution?
Voici mon code:
html
<head>
<style type="text/css">
#monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
#monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
#monmenu li{list-style-type: none; position: relative; width: 140px; height: 30px; background-color: #EEF3F7; padding: 2px; margin: 0px}
#monmenu li li{list-style-type: none; position: absolute; top: -40%; width: 780px; height: 400px; background-color: white; padding: 2px; margin: 0px}
#monmenu li:hover, #monmenu li.sfhover {background-color: white;}
#monmenu li:hover.active {url: ("Accueil.php"); background-color: white;}
#monmenu li a {text-decoration:none;}
#monmenu li:hover ul.niveau2, #monmenu li.sfhover ul.niveau2{display: block}
#monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
</style>
</head>
<div id="monmenu">
<ul class="niveau1">
<li class="active" style="positon: absolute; top: -50%;"> Qui somme nous?
<ul class="niveau2" style="width: 600px; height: 400px; border: 0px;">
</ul>
</li>
<li> Entreprise
<ul class="niveau2" style="width: 1900px; height: 400px; border: 0px;">
</ul>
</li>
<li> Client
<ul class="niveau2" style="width: 600px; top: -50%; height: 400px; border: 0px;">
</ul>
</li>
</ul>
</div>
</html>
css
<style type="text/css">
ul ul {display: none; position: absolute; left: 344px; height: 900; width: 900; top: -1px; margin:0px; padding: 0px; border: 1px solid black;}
li {list-style-type: none; position: relative; width: 40px; background-color: black; padding: 2px; margin: 0px}
li:hover, li.sfhover {display: block;}
li:hover ul.niveau2, li.sfhover ul.niveau2 {display: block;}
li.plus {background-position:right; background-repeat: no-repeat; border-bottom: 1px solid grey;}
</style>
A voir également:
- Problème de css
- Css download - Télécharger - HTML
- Enlever soulignement lien css ✓ - Forum CSS
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Enlever le soulignage des lien. - Forum CSS
- Css ligne horizontale ✓ - Forum CSS
1 réponse
Déjà je te conseille de mettre ton css dans un fichier css c'est plus propre.
Ensuite pour l'affichage avec un click il faut que tu utilise du javascript avc la fonction onclick
Ensuite pour l'affichage avec un click il faut que tu utilise du javascript avc la fonction onclick
catadote
Je ne suis pas trés forte ne javascript est- ce que tu peux me montrer comment faire?
will5555
Messages postés
370
Statut
Membre
45
Désolé ça fait n moment que j'en fait plus donc je sais plus comment faire
catadote
C'est pas grave merci quand même
