Problème de css
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>
