Problème menu déroulant sur site e-commerce

evareb Messages postés 6 Statut Membre -  
evareb Messages postés 6 Statut Membre -
Bonjour, pouvez vous me dire comment faire pour que le menu déroulant de mon site (www.habitat-design.net) s'affiche uniquement quand on passe la souris sur le menu? Actuellement le menu s'affiche même quand la souris est 4 cm en dessous du menu.
Merci d'avance pour vos réponses
A voir également:

7 réponses

Réponse 1 / 7
jean448 Messages postés 1543 Statut Membre 238
 
Salut
Si c'est le menu en noir moi il marche nickel
0
Réponse 2 / 7
evareb Messages postés 6 Statut Membre
 
Le problème c'est que le menu en noir s'affiche même quand la souris ne survol pas ce menu, il s'affiche par exemple si la souris passe à 3 cm en dessous du menu, ce qui n'est pas normal
0
jean448 Messages postés 1543 Statut Membre 238
 
Nan vraiment quand je passe à moins de 1cm il ne se passe rien
regarde ici ma souris était au bout de la flèche ( on peut pas la voir avec un simple imprime écran)
0
Réponse 3 / 7
evareb Messages postés 6 Statut Membre
 
regarde sur mon pc

https://www.youtube.com/watch?v=IJqNcf4NZ80&feature=youtu.be
0
Réponse 4 / 7
evareb Messages postés 6 Statut Membre
 
précision: Le problème est en dessous du menu
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
evareb Messages postés 6 Statut Membre
 
voici le code
<div id="cadre_menu">
<ul id="menu">
<li class="mitext menusep" id="pmenuradiateurs" onmouseover="OxMenu('menuradiateurs',true)" onmouseout="OxMenu('menuradiateurs',false)">
<form method="post" id="gotoa" action="design.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotoa").submit()'>Radiateurs Design</a>
<div><ul class="sousmenurad" id="menuradiateurs" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goaa" action="horizontaux.html"></form>
<a href='#' onclick='document.getElementById("goaa").submit()'>Radiateurs horizontaux</a>
</li>
<li class="montexte">
<form method="post" id="goab" action="verticaux.html"></form>
<a href='#' onclick='document.getElementById("goab").submit()'>Radiateurs verticaux</a>
</li>
<li class="montexte">
<form method="post" id="goac" action="accessoires.html"></form>
<a href='#' onclick='document.getElementById("goac").submit()'>Accessoires</a>
</li>
<li class="montexte">
<form method="post" id="goad" action="chromes.html"></form>
<a href='#' onclick='document.getElementById("goad").submit()'>Radiateurs Chromés</a>
</li>
<li class="montexte">
<form method="post" id="goae" action="inox.html"></form>
<a href='#' onclick='document.getElementById("goae").submit()'>Radiateurs Inox</a>
</li>
<li class="montexte">
<form method="post" id="goaf" action="mixtes.html"></form>
<a href='#' onclick='document.getElementById("goaf").submit()'>Radiateurs Mixtes</a>
</li>
<li class="montexte">
<form method="post" id="goag" action="seches-serviettes.html"></form>
<a href='#' onclick='document.getElementById("goag").submit()'>Radiateurs Sèches serviettes</a>
</li>
<li class="montexte">
<form method="post" id="goah" action="tendance.html"></form>
<a href='#' onclick='document.getElementById("goah").submit()'>Radiateurs Tendance</a>
</li>
<li class="montexte">
<form method="post" id="goai" action="sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("goai").submit()'>Radiateurs sur mesure</a>
</li>
<li class="montexte" id="pmenuelect" onmouseover="OxMenu('menuelect',true)" onmouseout="OxMenu('menuelect',false)">
<form method="post" id="goaj" action="electriques-design.html"></form>
<a href='#' onclick='document.getElementById("goaj").submit()'>Radiateurs Electriques Design</a>
<div><ul class="sousmenuele" id="menuelect" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goaja" action="seches-serviettes-electriques.html"></form>
<a href='#' onclick='document.getElementById("goaja").submit()'>Radiateurs Sèches Serviettes Electriques</a>
</li>
<li class="montexte">
<form method="post" id="goajb" action="electriques.html"></form>
<a href='#' onclick='document.getElementById("goajb").submit()'>Radiateurs électriques</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuporteentree" onmouseover="OxMenu('menuporteentree',true)" onmouseout="OxMenu('menuporteentree',false)">
<form method="post" id="gotob" action="menuiseries.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotob").submit()'>Menuiseries</a>
<div><ul class="sousmenuporte" id="menuporteentree" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goba" action="portes-entree-pvc.html"></form>
<a href='#' onclick='document.getElementById("goba").submit()'>Portes d'entrée PVC</a>
</li>
<li class="montexte">
<form method="post" id="gobb" action="portes-entree-alu.html"></form>
<a href='#' onclick='document.getElementById("gobb").submit()'>Portes d'entrée Aluminium</a>
</li>
<li class="montexte">
<form method="post" id="gobc" action="portes-entree-bois-metal.html"></form>
<a href='#' onclick='document.getElementById("gobc").submit()'>Portes d'entrée Bois/metal</a>
</li>
<li class="montexte">
<form method="post" id="gobd" action="portes-sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("gobd").submit()'>Portes sur mesure</a>
</li>
<li class="montexte">
<form method="post" id="gobe" action="fenetres-sur-mesure.php"></form>
<a href='#' onclick='document.getElementById("gobe").submit()'>Fenêtres sur mesure</a>
</li>
<li class="montexte">
<form method="post" id="gobf" action="verandas-sur-mesure.html"></form>
<a href='#' onclick='document.getElementById("gobf").submit()'>Vérandas</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuportegarage" onmouseover="OxMenu('menuportegarage',true)" onmouseout="OxMenu('menuportegarage',false)">
<form method="post" id="gotoc" action="portes-garage.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotoc").submit()'>Portes de garage</a>
<div><ul class="sousmenuportg" id="menuportegarage" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goca" action="portes-garage-sectionnelles.html"></form>
<a href='#' onclick='document.getElementById("goca").submit()'>Portes de garage sectionnelles</a>
</li>
<li class="montexte">
<form method="post" id="gocb" action="portes-garage-basculantes.html"></form>
<a href='#' onclick='document.getElementById("gocb").submit()'>Portes de garage basculantes</a>
</li>
<li class="montexte">
<form method="post" id="gocc" action="portes-garage-coulissantes.html"></form>
<a href='#' onclick='document.getElementById("gocc").submit()'>Portes de garage Coulissantes en latéral</a>
</li>
<li class="montexte">
<form method="post" id="gocd" action="portes-garage-industielles.html"></form>
<a href='#' onclick='document.getElementById("gocd").submit()'>Portes de garage industielles</a>
</li>
<li class="montexte">
<form method="post" id="goce" action="motorisation-porte-garage.html"></form>
<a href='#' onclick='document.getElementById("goce").submit()'>Motorisation Porte de garage</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenucheminees" onmouseover="OxMenu('menucheminees',true)" onmouseout="OxMenu('menucheminees',false)">
<form method="post" id="gotod" action="cheminees.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotod").submit()'>Cheminées Ethanol</a>
<div><ul class="sousmenuche" id="menucheminees" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goda" action="cheminees-murales.html"></form>
<a href='#' onclick='document.getElementById("goda").submit()'>Murales</a>
</li>
<li class="montexte">
<form method="post" id="godb" action="cheminees-posees-au-sol.html"></form>
<a href='#' onclick='document.getElementById("godb").submit()'>Posées au sol</a>
</li>
<li class="montexte">
<form method="post" id="godc" action="cheminees-ouvertes.html"></form>
<a href='#' onclick='document.getElementById("godc").submit()'>Ouvertes</a>
</li>
<li class="montexte">
<form method="post" id="godd" action="cheminees-gamme-eco.html"></form>
<a href='#' onclick='document.getElementById("godd").submit()'>Gamme économique</a>
</li>
<li class="montexte">
<form method="post" id="gode" action="cheminees-exterieur.html"></form>
<a href='#' onclick='document.getElementById("gode").submit()'>Cheminées d'extérieurs</a>
</li>
<li class="montexte">
<form method="post" id="godf" action="cheminees-insert-traditionnels.html"></form>
<a href='#' onclick='document.getElementById("godf").submit()'>Cheminée/insert traditionnels</a>
</li>
<li class="montexte">
<form method="post" id="godg" action="accessoires-cheminees.html"></form>
<a href='#' onclick='document.getElementById("godg").submit()'>Accessoires</a>
</li>
</ul>
</div>
</li>
<li class="mitext menusep" id="pmenuexterieur" onmouseover="OxMenu('menuexterieur',true)" onmouseout="OxMenu('menuexterieur',false)">
<form method="post" id="gotoe" action="exterieur-design.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="al" /></form>
<a href='#' onclick='document.getElementById("gotoe").submit()'>Extérieur design</a>
<div><ul class="sousmenuext" id="menuexterieur" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goea" action="sauna.html"></form>
<a href='#' onclick='document.getElementById("goea").submit()'>Sauna</a>
</li>
<li class="montexte">
<form method="post" id="goeb" action="spa.html"></form>
<a href='#' onclick='document.getElementById("goeb").submit()'>Spa</a>
</li>
<li class="montexte">
<form method="post" id="goec" action="mobilier-design.html"></form>
<a href='#' onclick='document.getElementById("goec").submit()'>Mobiler Design</a>
</li>
<li class="montexte" id="pmenuparasol" onmouseover="OxMenu('menuparasol',true)" onmouseout="OxMenu('menuparasol',false)">
<form method="post" id="goed" action="parasols.html"></form>
<a href='#' onclick='document.getElementById("goed").submit()'>Parasols Chauffants</a>
<div><ul class="sousmenupar" id="menuparasol" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goeda" action="parasols-gaz.html"></form>
<a href='#' onclick='document.getElementById("goeda").submit()'>Parasols Chauffants gaz</a>
</li>
<li class="montexte">
<form method="post" id="goedb" action="parasols-electriques.html"></form>
<a href='#' onclick='document.getElementById("goedb").submit()'>Parasols Chauffants Electriques</a>
</li>
</ul>
</div>
</li>
<li class="montexte" id="pmenubarbecu" onmouseover="OxMenu('menubarbecu',true)" onmouseout="OxMenu('menubarbecu',false)">
<form method="post" id="goee" action="cuisson-design.html"></form>
<a href='#' onclick='document.getElementById("goee").submit()'>Barbecues Design</a>
<div><ul class="sousmenubar" id="menubarbecu" onmouseover="OxSubMenu(this,true)" onmouseout="OxSubMenu(this,false)">
<li class="montexte">
<form method="post" id="goeea" action="cuisson-planchas.html"></form>
<a href='#' onclick='document.getElementById("goeea").submit()'>Planchas</a>
</li>
<li class="montexte">
<form method="post" id="goeeb" action="cuisson-portables.html"></form>
<a href='#' onclick='document.getElementById("goeeb").submit()'>Camping/Portables</a>
</li>
<li class="montexte">
<form method="post" id="goeec" action="cuisson-electriques.html"></form>
<a href='#' onclick='document.getElementById("goeec").submit()'>Barbecues électriques</a>
</li>
<li class="montexte">
<form method="post" id="goeed" action="cuisson-inox.html"></form>
<a href='#' onclick='document.getElementById("goeed").submit()'>Barbecues inox</a>
</li>
<li class="montexte">
<form method="post" id="goeef" action="cuisson-bois.html"></form>
<a href='#' onclick='document.getElementById("goeef").submit()'>Barbecues bois</a>
</li>
<li class="montexte">
<form method="post" id="goeeg" action="cuisson-fuego.html"></form>
<a href='#' onclick='document.getElementById("goeeg").submit()'>Fuego</a>
</li>
</ul>
</div>
</li>

</ul>
</div>
</li>
<li class="mitext menusep" id="pmenubioethanol">
<form method="post" id="gotof" action="bio-ethanol.html">
<input type="hidden" name="mat" value="all" />
<input type="hidden" name="cat" value="ba" /></form>
<a href='#' onclick='document.getElementById("gotof").submit()'>Bio éthanol</a>
<div><ul class="sousmenubio" id="menubioethanol">
<li class="montexte">
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript" language="javaScript">
// <![CDATA[
function OxMenu(menu,display)
{
var objElem=(document.getElementById)?document.getElementById(menu):document[menu];
objElem.style.visibility=display?'visible':'hidden';
}
function OxHandleSubMenu(id,over)
{
var newClass='subactive', objElem=(document.getElementById)?document.getElementById(id):document[id];
if (!objElem) return;
var cls = objElem.className, idx = (' '+cls+' ').indexOf(' ' + newClass + ' ');
if (over)
{
if(idx<0) objElem.className=cls+(cls?' ':'')+newClass;
}
else if(idx>=0) objElem.className=objElem.className.replace(new RegExp('(\\s|^)'+newClass+'(\\s|$)'),' ');
}
function OxSubMenu(elem,over)
{
OxHandleSubMenu('a'+elem.id,over);
}
// ]]>
</script>
<div id="navigation">
<a href="index.php">Accueil</a><a href="<? echo $lien_url ?>"><? echo $nom_url ?></a><? echo $nom_du_lien;
if($pseudo!="") { echo " Votre pseudo est : ".$pseudo."";}?>

</div>
0
Réponse 6 / 7
jean448 Messages postés 1543 Statut Membre 238
 
J'en est fais un en HTML + CSS uniquement et il marche bien donc je te passent mon code source si ça peut t'aider (Pour le tien je peut pas trop t'aider je connais pratiquement rien en js)

------------------------------------HTML-----------------------------------------

<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="#">Film</a>
<ul id="menu2">
<li><a href="film.php">Voir tout</a></li>
<li><a href="ajout.php">En ajouter un</a></li>
<li><a href="film.php?genre=Action">Action</a></li>
<li><a href="film.php?genre=Comedie">Comedie</a></li>
<li><a href="film.php?genre=Horreur">Horreur</a></li>
<li><a href="film.php?genre=Fantastique">Fantastique</a></li>
<li><a href="film.php?genre=Science fiction">Science fiction</a></li>
<li><a href="film.php?genre=Drame">Drame</a></li>
<li><a href="film.php?genre=Catastrophe">Catastrophe</a></li>
</ul>
</li>
<li><a href="#">Serie</a>
<ul id="menu2">
<li><a href="serie.php">Voir tout</a></li>
<li><a href="ajout1.php">En ajouter une</a></li>
<li><a href="serie.php?genre=Action">Action</a></li>
<li><a href="serie.php?genre=Comedie">Comedie</a></li>
<li><a href="serie.php?genre=Horreur">Horreur</a></li>
<li><a href="serie.php?genre=Fantastique">Fantastique</a></li>
<li><a href="serie.php?genre=Science fiction">Science fiction</a></li>
<li><a href="serie.php?genre=Drame">Drame</a></li>
<li><a href="serie.php?genre=Catastrophe">Catastrophe</a></li>
</ul>
</li>
<li><a href="demande.php">Demande</a></li>
</ul>

----------------------------------LE CSS---------------------------------------

/***MENU***/
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0
}
#menu li {
display: inline-block;
position: relative;
}
#menu2 li {
display: inline-block;
position: relative;
z-index:4;
}
#menu a {
display: block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
background: #121212;
color:#ffffff;
text-decoration:none;
font-size: 18px;
font-weight:bold;
border:-1px solid blue;
}
#menu a:hover {
display: block;
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
background: #5c5c5c;
color:#ffffff;
text-decoration:none;
font-size: 18px;
font-weight:bold;

}
#menu2 a {
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background:#383838;
color:#ffffff;
text-decoration:none;
font-size: 11px;
font-weight:none;
z-index:2;
}
#menu2 a:hover {
display: block;
width: 98px;
height: 30px;
line-height: 30px;
text-align: center;
background:#5a5a5a;
color:#ffffff;
text-decoration:none;
font-size: 14px;
font-weight:none;
border-right:2px solid red;
z-index:2;
}
#menu ul {
left: -4000px;
position: absolute
}
#menu li:hover > ul {
left: 0
}
#menu li li:hover > ul {
left: 150px;
top: 0
}

------------------------------

La différence entre menu et menu2 se fais sur les couleurs
0
Réponse 7 / 7
evareb Messages postés 6 Statut Membre
 
merci
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses