Je suis complétement coincée!!!!!!
J'ai fait un petit menu css et javascript, mais le relover de mon "menu1", "menu 2", menu 3" ne fontionne pas. J'aimerai qu'ils soient souligné et aparaissent en une autre couleur.
Mais pour les sous menus (sous menu 1.1, etc) le relover (souligné) se fait correctement! Pourtant le code est le même et je ne comprends pas ou est l'erreur....?!!!
SVP AIDEZ-MOI!!!!!
Voici le code:
<html>
<head>
<script type="text/javascript">
<!--
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';}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
body
{
margin: 0;
padding: 0;
background: white;
font: 80% arial, sans-serif;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu
{
width: 11.5em;
}
#menu dt
{
cursor: pointer;
margin: 0;
text-indent: 0.3cm;
vertical-align: baseline;
font-weight: ;
border-bottom: solid 1px #666666;
background: #F2F2F2;
color: #686868;
font-size: #small;
font: 85% arial, sans-serif;
}
#menu dd
{
border-bottom: 1px solid #666666;
}
#menu dt a {
height: 20px;
line-height: 20px;
display: block;
width:100%; }
#menu dt a:hover
{
background: #F9F9F9;
text-decoration: underline;
}
#menu li
{
text-align: center;
background: #F9F9F9
}
#menu li a
{
color:#686868;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
font-size: #small;
font: 85% arial, sans-serif;
}
#menu li a:hover
{
background: #F9F9F9;
text-decoration: underline;
}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans nom</title>
</head>
<body>
<dl id="menu">
<dt onclick="javascript:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
<li><a href="#">Sous-Menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>
</dl>
</body>
</html>