Probleme menu deroulant html/css/javascript

Marsh Posté le 14-07-2005 à 10:53:24

J'ai un probleme avec mon menu deroulant. Il marche tres bien avec mozilla mais il deconne avec internet explorer. En fait sous internet les sous menu ne sont pas centres alors ke sur mozilla il sle sont. Ensuite quand on selectione un lien du sous menu un fond de couleur apparait sur le lien selectionne et sur internet ce fond n apparait pas sur tout le long de la lgne.
De plus lorsque je ne suis plus sur les sous menus il ne se reenroule pas dans ce cas autant sur mozilla ke sur firefox, je ne sais pas comment il faut faire et je voudrais bien que les sous menus se reenroulent lorsque le pointeur de la souris n'est plus sur les sous menu.

Voila mon code :

CSS :
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;

}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #ccc;
margin: 0;
padding: 0;
list-style-type: none;

}
#menu li a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover{
background: #eee;
}
#menu dt a:hover{
background: #eee;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
margin: 0;
padding: 0;
}

javascript :



HTML :
<html><head><title></title>

<script type="text/javascript" src="script.js"></script>

<link rel="stylesheet" type="text/css" href="style.css"></head>

<body>

<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a href="home.html">Home</a></dt>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu1');">Products</dt>
<dd style="display: none;" id="smenu1">

<li><a href="fresh.html">Fresh Poultry</a></li>
<li><a href="frozen.html">Frozen Poultry</a></li>
<li><a href="further.html">Further Poultry</a></li>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre('smenu2');">Information</dt>
<dd style="display: none;" id="smenu2">

<li><a href="organization.html">Organization</a></li>
<li><a href="results.html">Results</a></li>
<li><a href="contacts.html">Contacts</a></li>

</dd>
</dl>

</div>
</body>
</html>