18041 sujets

Questions générales et questions de débutants

[Résolu][Menu déroulant] Problème de sous-menu

Bonjour a tous,

J'ai actuellement un gros souci avec un site que je développe :

Sur cette page : http://www.2-spi.com/test/ vous verrez le menu que j'ai repris de Alsacréation, et j'y ai rajouté un onmouseout, hors sur Firefox aucun souci mais sur IE 6 ou IE 7 il est très mal gérer, le problème est que je ne peux naviguer dans les sous menu.

Voici le code HTML :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript" src="menu.js"></script>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>


<!-- DEBUT PAGE -->
<div id="page">

    <!-- DEBUT HEADER -->
    <div id="header">
    	<div id="header-col-g">
    	  <div id="header-menu">
          <div id="btn-accueil" onmouseover="javascript:montre('smenu1');"><img src="img/menu/btn-accueil.gif" alt="Accueil" border="0" /></div>
    	  <div id="btn-categories" onmouseover="javascript:montre('smenu2');"><img src="img/menu/btn-categories.gif" alt="Cat&eacute;gories" border="0" /></div>
    	  <div id="btn-marques" onmouseover="javascript:montre('smenu3');"><img src="img/menu/btn-marques.gif" alt="Marques" border="0" /></div>
    	  <div id="btn-auto" onmouseover="javascript:montre('smenu4');"><img src="img/menu/btn-auto.gif" alt="Auto" border="0" /></div>
    	  <div id="btn-hightech" onmouseover="javascript:montre('smenu5');"><img src="img/menu/btn-hightech.gif" alt="High Tech" border="0" /></div>
    	  <div id="btn-services" onmouseover="javascript:montre('smenu6');"><img src="img/menu/btn-services.gif" alt="Services" border="0" /></div>
    	  <div id="btn-bonus" onmouseover="javascript:montre('smenu7');"><img src="img/menu/btn-bonus.gif" alt="Bonus" border="0" /></div>
    	  <div id="fin-menu"><img src="img/menu/img-menu.gif" alt="" border="0" /></div>
    	  <div id="smenu1">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu2">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu3">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu4">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu5">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu6">
            <ul onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
    	  <div id="smenu7">
            <ul   onmouseout="javascript:montre('');">
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.1</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.2</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.3</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.4</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.5</li>
              <li onclick="MM_goToURL('parent','url.html');return document.MM_returnValue">Sous-Menu 1.6</li>
            </ul>
  	    </div>
  	  </div>
</div>
    	
   	  <div class="texte-gris" id="header-col-d"></div>
  </div>
<!-- FIN HEADER -->
    
    <!-- DEBUT CONTENU -->
  <div id="contenu">    
    <div id="contenu-head">
    	 <div id="col-g">
       	   <div id="categorie">
                <div id="top-cate">
                  <div style="padding-bottom:15px;">
                    <div><a href="#" class="mot-cate">Ecolo</a>, <a href="#" class="mot-cate">Citadine</a>, <a href="#" class="mot-cate">Berline</a>, <a href="#" class="mot-cate">Monospace</a> fs fsdf sdf sdf sdf sf sdf sdf sd fsdf sd fsd fsd fsdf s df sdf sdf sd fsdf sd fsdf</div>
                        <div class="lien-cate"><a href="#" class="lien-cate">Plus de cat&eacute;gorie Auto</a> sdfsdfsdf sd fsdfsdfsdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fdsf sdf sdf sdf sdf sdf sdf sdfsd f</div>
                  </div>    
                    </div>
       	   </div>         
       	   </div>
    </div>
  </div>
  <!-- FIN CONTENU -->
</div>
<!-- FIN PAGE -->
</body>
</html>


Le code js :

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}


window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}


Et le code css :

#header {
	width: 800px;
	height:138px;
	position: relative;
	z-index: 100;
}
#header-col-g{
	height:138px;
	width:800px;
	float: left;
	z-index: 100;
}
#header-menu{
	width:800px;
	height:31px;
	position: absolute;
	z-index: 1000;
	cursor: pointer;
	float: left;
	top: 107px;
	left: 0px;
}
#btn-accueil{
	float:left;
	height:31px;
	width:89px;
}
#btn-categories{
	float:left;
	height:31px;
	width:108px;
}
#btn-marques{
	float:left;
	height:31px;
	width:97px;
}
#btn-auto{
	float:left;
	height:31px;
	width:66px;
}
#btn-hightech{
	float:left;
	height:31px;
	width:101px;
}
#btn-services{
	float:left;
	height:31px;
	width:94px;
}
#btn-bonus{
	float:left;
	height:31px;
	width:79px;
}
#fin-menu{
	float:left;
	height:31px;
	width:166px;
}
#header-menu ul {
	list-style-type: none;
	padding:0px;
	margin:0px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#505050;
	font-size:11px;
	background-color: #fff;
	border:#3c7faf solid 1px;
}
#header-menu li {
	list-style-type: none;
	padding-left:5px;
	padding-right:5px;
	margin:0px;
}
#header-menu li:hover {
	cursor:pointer;
	color:#fff;
	background-color:#3c7faf;
	margin:0px;
}
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7{
	float:left;
	padding-left:0px;
	margin:0px;
}

#smenu1{
	padding-left:0px;
}
#smenu2{
	padding-left:89px;
}
#smenu3{
	padding-left:196px;
}
#smenu4{
	padding-left:293px;
}
#smenu5{
	padding-left:360px;
}
#smenu6{
	padding-left:460px;
}
#smenu7{
	padding-left:555px;
}


Aidez moi car la je tourne en rond sans trouvez la solution.

Merci pour votre aide !
[/i]
Modifié par Scoopien (21 Mar 2008 - 15:11)
Sujet clos
Aller à