overflow, IE et firefox pas sur la meme frequence

[cognotte]

Bonjour,

Voila j'ai réalisé un menu en css avec un poil de javascript pour dynamiser un peu (oui il n'est pas encore entierement css !)

Et j'ai un souci avec explorer et/ou firefox.

Lors de l'ouverture de mes sous menu (cf code plus bas) explorer aggrandit la div qui contient mes sous menu alors que j'ai fixer la taille de celle ci a 0 (classe .sous_menu).

J'arriv a regler ce probleme en rajoutant overflow:hidden a la classe .sous_menu, mais la c'est firefox qui ne m'affiche plus les sous menu.

J'avoue ne pas voir comment faire pour que ca fonctionne sur les deux plates forme.

Help

Ben

<style type="text/css">
<!--
#menu{
	border-top: 1px #CCCCCC;
	border-right: 1px #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px #CCCCCC;
	padding-top: 1px;
	padding-bottom: 1px;
	background: #5A6BA5;
}

.sous_menu {
	height:0px;
}

#menu p{
	padding-left: 5px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	margin-top: 2px;
	margin-bottom: 2px;
}

#menu p a{
	vertical-align: middle;
	color: #FFFFFF;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
}

#menu p a:hover{
	text-decoration: underline;
}

#menu2 {
	border-top: 1px #CCCCCC;
	border-right: 1px #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #CCCCCC;
	padding-top: 1px;
	padding-bottom: 1px;
	background:#339999;
	position: relative;
	top: -21px;
	right: -160px;
}
-->
</style>

<div id='menu'>
  <p><a href='#' onmouseover='sous_menu(16)'>Auteur</a></p>
  <div id='ss16' class='sous_menu'>
    <div id='menu2'>
    <p><a href='index.php?m=1000' target='_self'>Me Déconnecter</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=1' target='_self'>Votre Profil</a></p>
    </div>
  </div>
</div>

<div id='menu'>
  <p><a href='#' onmouseover='sous_menu(17)'>Cours</a></p>
  <div id='ss17' class='sous_menu'>
    <div id='menu2'>
      <p><a href='index.php?m=100' target='_self'>Liste des Branches</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=104' target='_self'>Arborescence</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=400' target='_self'>Liste des Packs</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=10' target='_self'>Mes Modules</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=105' target='_self'>Recherche</a></p>
    </div>
  </div>
</div>

<div id='menu'>
  <p><a href='#' onmouseover='sous_menu(20)'>Télécom</a></p>
  <div id='ss20' class='sous_menu'>
    <div id='menu2'>
      <p><a href='#' onclick="popup_menu('../phpBB2/index.php');">Forum</a></p>
    </div>
    <div id='menu2'>
      <p><a href='index.php?m=601' target='_self'>Messagerie</a></p>
    </div>
  </div>
</div>

<script type="text/javascript">
var tab_b = Array(16,17,20);
function sous_menu(id){
	var truc = '';
	for(var i=0; i< tab_b.length; i++){
  var truc = 'ss'+tab_b[i];
  document.getElementById(truc).style.display = 'none';
	}	
	document.getElementById('ss'+id).style.display = 'block';
}

sous_menu();

</script>  

[Modérateur : merci d'utiliser la balise CODEBOX]

[cognotte]

Bon en fait j'ai trouvé la solution grace a un autre post du hub : menu css

Je recopierai 100 fois : "lis les messages du hub avant de poser ta question"

En plus c'est sans javascript

Merci

Ben