nicht angemeldet
Guten Morgen,
ich habe mir jetzt ein Menü basierend auf JS gesucht.
Hab aber mit der CSS-Datei und der Darstellung noch so meine Schwierigkeiten.
Wenn ich nämlich dem <dt> ein Style zuweise, reagiert nur der erste Menüpunkt, wie z.B. beim Hover.
Außerdem möchte ich, dass die gesamte Zeile die farbige Hinterlegung anzeigt, egal, wo ich mit der Maus drüberfahre (ob Text oder nur der Kasten). Im Moment wird der Hover-Effekt nur angezeigt, wenn ich direkt über die Schrift gehe.
Hier ein Auszug aus der HTML-Datei:
------------------
<body>
<table>
<tr>
<td>
<!-- Menu -->
<dl id="menu">
<dt class="menu" onmouseover="javascript:montre('smenu1');"><a href="#">Menüpunkt1</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
</ul>
</dd>
<dt class="menu" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menüpunkt2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Text1</a></li>
<li><a href="#">Text2</a></li>
<li><a href="#">Text3</a></li>
<li><a href="#">Text4</a></li>
</ul>
</dd>
</dl>
</td>
<td>
<div style="width:300px; height:200px; overflow:scroll; border:1px solid #FF0000;">
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
Hier steht ein toller Text!!<br />
</div>
</td>
</tr>
</table>
</body>
---------------------------
Und die dazugehörige CSS-Datei:
----------------------------
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
top: 1em;
left: 1em;
width: 15em;
padding:0;
margin:0;
font-size:8pt;
font-family:Verdana;
color:#FFFFFF;
}
#menu dt
{
cursor: pointer;
background-color: #818181;
height: 20px;
border-bottom: 1px solid #999999;
font-size: 8pt;
}
#menu dd
{
cursor: pointer;
position: absolute;
z-index: 100;
left: 11em;
margin-top: -1.5em;
width: 15em;
background-color:#9E9E9E;
border-bottom:1px solid #777777;
padding-bottom:0px;
font-size: 8pt;
}
#menu ul
{
padding: 2px;
}
#menu li
{
font-size: 8pt;
height: 18px;
line-height: 18px;
}
.menu /*#menu li a, #menu dt a */
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:4px;
}
#menu li a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}
#menu dt a:hover, #menu dd a:hover
{
text-decoration:none;
background-color:#4F4F4F;
}
#menu li a, #menu dt a
{
color: #FFFFFF;
text-decoration: none;
display: block;
padding:0;
}
-------------------------------
Wo muss ich denn was angeben, damit meine "Wünsche in Erfüllung gehen"??
Liebe Grüße,
Nadja
Gunnar Bittersmann