nicht angemeldet
Hallo, ich will da ein PopUp-Menü erstellen, was auch geklappt hat, nur sollte das aéigtenlich neben Sortiment stehen und nicht untendrunter. Wenn ich es mit "margin" mache verschiebt er leider auch die Navileiste, d.h. sie wird breiter. Wie kann ich das machen, dass er die Untermenüs bei "onmouseover" einfach über die Haupttabelle setzt?
Anbei der CSS und HTML-Code der Navileiste, wenn ihr mehr braucht sagt es:
<style type="text/css">
body {
background-color:white;
background-color:white;
background-repeat:repeat-y
}
#navigation {
top:50px;
width:146px;
}
a.navi, a.navi1, a.navi2, a.navi3, a.navi4, a.navi5, a.navi_first, a.navi_self {
display:block;
white-space:nowrap;
overflow:hidden;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:1px solid black;
font-family:TimesNewRoman,sans-serif;
font-size:12px;
font-weight:bold;
text-decoration:none;
letter-spacing:0.1em;
padding:3px;
text-align:center;
}
a.navi_first {
border-top:1px solid white;
}
a:link.navi, a:link.navi_first, a:visited.navi, a:visited.navi_first {
background-color:#CF5F62;
color:black;
}
}
a.navi1_first {
border-top:1px solid white;
}
a:link.navi1, a:link.navi_first, a:visited.navi1, a:visited.navi_first {
background-color:#CF5F62;
color:black;
}
}
a.navi2_first {
border-top:1px solid white;
}
a:link.navi2, a:link.navi_first, a:visited.navi2, a:visited.navi_first {
background-color:#CF5F62;
color:black;
}
}
a.navi3_first {
border-top:1px solid black;
border-bottom:1px solid black
}
a:link.navi3, a:link.navi_first, a:visited.navi3, a:visited.navi_first {
background-color:#CF5F62;
color:black;
}
}
a.navi4_first {
border-top:1px solid white;
}
a:link.navi4, a:link.navi_first, a:visited.navi4, a:visited.navi_first {
background-color:gray;
color:black;
}
}
a.navi5_first {
border-top:1px solid white;
}
a:link.navi5, a:link.navi_first, a:visited.navi5, a:visited.navi_first {
background-color:#CF5F62;
color:black;
}
a:link.navi_self, a:visited.navi_self {
background-color:#CF5F62;
color:black
}
a:hover.navi, a:hover.navi_first, a:hover.navi_self, a:active.navi, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
a:hover.navi1, a:hover.navi_first, a:hover.navi_self, a:active.navi1, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
a:hover.navi2, a:hover.navi_first, a:hover.navi_self, a:active.navi2, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
a:hover.navi3, a:hover.navi_first, a:hover.navi_self, a:active.navi3, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
a:hover.navi4, a:hover.navi_first, a:hover.navi_self, a:active.navi4, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
a:hover.navi5, a:hover.navi_first, a:hover.navi_self, a:active.navi5, a:active.navi_first, a:active.navi_self {
background-color:white;
color:black;
}
#navi2_sublinks {
top:60px;
width:145px;
border-bottom:1px solid black;
border-right-witdh:1px solid black;
z-index10; padding-left:visibility;
padding-right:visibility;
padding-bottom:hidden
}
.sub_link {
display:block;
text-align:center;
height:18px;
font-family:"MS Sans Serif",sans-serif;
font-size:12px;
font-weight:bold;
padding-top:1px;
text-decoration:none;
}
.sub_link:link, .sub_link:visited {
background-color:#CF5F62;
color:white;
}
.sub_link:hover, .sub_link:active {
background-color:white;
color:black;
}
</style>
<body bgcolor="#FFF3E8">
<table width="827" border="0" cellpadding="0" cellspacing="3" align="center" height="466">
<tr>
<td height="118" colspan="4" background="images/Banner-Weinhof.gif" width="821"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#902B2E" rowspan="2" width="146" height="324"><table width="140" border="0" cellpadding="0">
<div id="navigation">
<a class="navi_self navi_first" href="/index.html">
Home
</a>
<a class="navi" href="/wir.html" title="">
Wir über uns
</a>
<a class="navi1" href="/angebot.html" title="">
Angebot
</a>
<a href="/sortiment.html" class="navi2" id="navi2"
onMouseover="document.getElementById('navi2_sublinks').style.visibility='visible'"
onMouseout="document.getElementById('navi2_sublinks').style.visibility='hidden'">
Sortiment</a>
<div id="navi2_sublinks"
onMouseover="document.getElementById('navi2_sublinks').style.visibility='visible'"
onMouseout="document.getElementById('navi2_sublinks').style.visibility='hidden'">
<a href="" class="sub_link">Rotwein</a>
<a href="" class="sub_link">Weißwein</a>
<a href="" class="sub_link">Sekt</a>
<a href="" class="sub_link">Säfte</a>
</div>
<a class="navi3" href="/aktuelles.html" title="">
Aktuelles
</a>
<a class="navi4" href="/vts.html" title="">
Veranstaltungen
</a>
<a class="navi5" href="/impressum.html" title="">
Impressum
</a>
</div>
</table>