Hallo Leute,

Ich bin ganz neu hier und habe direkt ein Problem. Ich versuche einen Menübaum mit 2 Submenüs zu basteln. Das erste Submenü ist kein Problem jedoch bekomm ich das zweite nicht hin.

htmlcode:
<div id="menu">
<dl onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="index.php">Home</a>
<dt id="smenu1" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();"><a href="#">Abteilungen</a></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Fussball</a>
</ul>
</dd>
</dl>

</div>

<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>



css code:

dl, dt, dd, ul, li , l{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
width: 10em;
margin: 0; padding: 0.8em;
border: 1px solid black;
background-color: #0C6B1C;
}

#menu dl {
cursor: pointer;
background: #A9BFCB;
height: 40px;
line-height: 25px;
margin: 3px 1;
border: 1px solid white;
text-align: center;
font-weight: bold;
}

#menu dt {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #0C6B1C;
border: 1px solid gray;
}

#menu dd{
position: absolute;
z-index: 100;
left: 14em;
margin-top: -0.8em;
width: 10em;
background: #0C6B1C;
border: 1px solid gray;
}

#menu ul {
text-align: center;
list-style: none;
margin: 0.4em; padding: 2x;
}
#menu dl a:hover{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

#menu dt a:hover{
border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;
}

#menu li {
text-align: center;
list-style: none;
margin: 0.2em; padding: 0;
background-color: #A9BFCB;
line-height: 12px;
}
#menu li a, #menu dl a, #menu dt a, dd a {
display:block;
padding: 0.5em;
text-decoration: none; font-weight: bold;
color: white; background-color: #000000;
}

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

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: white;
}
#mentions a:hover{text-decoration: underline;
}



Wenn ich auf das erste Submenu mit der Maus drüber fahre passiert einfach nichts...

Bin für jede Hilfe Dankbar!!!

Viele Grüße
Christian
Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!