28220 sujets

CSS et mise en forme, CSS3

Menu deroulant (encore!), problème de superposition

Bonjour.
Après avoir cherché sur le site et sur le web, je ne trouve toujours pas le problème à ma superposition de sous-menu. Les sous menus apparaissent à moitié en dessous du menu précédent... Je sais que les menus déroulant avec superposition ne sont pas le top, mais on m'a demandé de faire ça... Le problème apparaît dans IE, tout est correct dans Firefox... Le pire c que je sens que je ne suis pas loin. J'ai l'impression que le pb vient de ma ligne: #menu li {position: relative;} ou du fait que j'utilise le même ul pour les sous-menus... Pourtant Firefox l'affiche bien!!!
Voici le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Menu Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
#menu{
width: 140px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
font-weight: bold;
}
#menu a {
color: Black;
background: Red;
text-decoration: none;
}
#menu a:hover {
color: Black;
background: Orange;
text-decoration: underline;
}
#menu ul {
			list-style: none;
			margin: 0;
			padding: 0;
			width: 140px;
			text-align: center;
			}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: outset;
height: 100%;
margin: 0;
}
#menu h2 {
color: White;
background: Black;
text-transform: uppercase;
}
#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 4;
left: 80%;
top: 5px;
}

#menu ul ul ul {
position: absolute;
top: 5px;
width: 100%;
left: 80%;
z-index: 5;
}

/*Correction Bug IE*/
#menu ul li {float: left; width: 100%;}

#menu ul li a {height: 1%;}

</style>

<script type="text/javascript">
function ouvrirMenu(MenuCalque)
{
var Calque;
Calque= document.getElementById(MenuCalque);
Calque.style.visibility= 'visible';
}
function fermerMenu(MenuCalque)
{
var Calque;
Calque= document.getElementById(MenuCalque);
Calque.style.visibility= 'hidden';
}
</script>

</head>

<body>
<div>
<div id="menu">
<ul>
  <li onMouseOver="ouvrirMenu('sousmenu1')" onMouseOut="fermerMenu('sousmenu1')"><h2>Bor&eacute;alDesign</h2>
    <ul id="sousmenu1" style="visibility:hidden;">
      <li><a href="#" title="Historique">Historique</a></li>
      <li><a href="#" title="Mission">Mission</a></li>
      <li><a href="#" title="Communiqu&eacute;s">Communiqu&eacute;s</a></li>
      <li><a href="#" title="&Eacute;v&eacute;nements/Commandites">&Eacute;v&eacute;nements</a></li>
    </ul>
  </li>
</ul>

<ul>
  <li onMouseOver="ouvrirMenu('sousmenu2')" onMouseOut="fermerMenu('sousmenu2')"><h2>Nos produits</h2>
    <ul id="sousmenu2" style="visibility:hidden;">
      <li><a href="catalogue.php" title="Commander un catalogue">Catalogue</a></li>
      <li><a href="#" title="Nouveaut&eacute;s">Nouveaut&eacute;s</a></li>
      <li><a href="#" title="Am&eacute;liorations">Am&eacute;liorations</a></li>
      <li><a href="#" title="Souci du d&eacute;tail">Souci du d&eacute;tail</a></li>
      <li onMouseOver="ouvrirMenu('kayakc')" onMouseOut="fermerMenu('kayakc')"><a href="kayakc.php" title="Kayaks en composite">Kayaks en composite</a>
      	<ul id="kayakc" style="visibility:hidden;">
          <li><a href="#" title="Pakesso">Pakesso</a></li>
			 <li><a href="#" title="Narval">Narval</a></li>
			 <li><a href="#" title="Alvik">Alvik</a></li>
			 <li><a href="#" title="Ellesmere">Ellesmere</a></li>
			 <li><a href="#" title="Saguenay">Saguenay</a></li>
			 <li><a href="#" title="Nanook">Nanook</a></li>
			 <li><a href="#" title="B&eacute;luga">B&eacute;luga</a></li>
      	</ul>
		</li>
		<li><a href="#" title="Kayaks en plastique">Kayaks en plastique</a></li>
      <li><a href="#" title="Pagaies">Pagaies</a></li>
      <li><a href="#" title="V&ecirc;tements et accessoires">V&ecirc;tements</a></li>
      <li><a href="#" title="Garantie">Garantie</a></li>
    </ul>
  </li>
</ul>
...
..
.

Merci de m'aider...
Sujet clos
Aller à