ansgar1704: PopUp-Menü bei onmouseover

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">&nbsp;</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>

  1. 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?

    Nach kurzem Anschauen habe ich die Idee, dass du das ganz einfach mit

      
    position:relative;  
    left:150px;  
    
    

    in .sub_link

    lösen könntest.

    1. 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?

      Nach kurzem Anschauen habe ich die Idee, dass du das ganz einfach mit

      position:relative;
      left:150px;

      
      >   
      > in .sub\_link  
      >   
      > lösen könntest.  
        
      Klappt. Danke sehr. Nur ist jetzt leider immer noch die große Lücke in der NAvilesite, kann ich die noch rausmachen? und außerdem sollte das direkt neben Sortiment sein, weil man sonst nicht auf die untermenüs kommt. Danke schonmal für den neuen Tipp.
      
      1. Klappt. Danke sehr. Nur ist jetzt leider immer noch die große Lücke in der NAvilesite, kann ich die noch rausmachen? und außerdem sollte das direkt neben Sortiment sein, weil man sonst nicht auf die untermenüs kommt. Danke schonmal für den neuen Tipp.

        Du kannst auch negative Werte zur Positionierung angeben und das Untermenu so nach oben schieben:

          
        position:relative;  
        left:145px;  
        top:-22px;  
        
        

        Die Lücke entsteht, weil visibility:hidden; ein Element zwar nicht anzeigt, den Platz aber reserviert. Verwende die Eigenschaft display:none; um das Element gar nicht anzuzeigen. So wird kein Platz dafür reserviert.

        1. Die Lücke entsteht, weil visibility:hidden; ein Element zwar nicht anzeigt, den Platz aber reserviert. Verwende die Eigenschaft display:none; um das Element gar nicht anzuzeigen. So wird kein Platz dafür reserviert.

          Jetzt ist aber auch das Untermenü wieder verschwunden?!
          Wie bringe ich das wieer zum auftauchen, wenn das klappt bist du echt super.

          1. Jetzt ist aber auch das Untermenü wieder verschwunden?!
            Wie bringe ich das wieer zum auftauchen, wenn das klappt bist du echt super.

            Dann hast du wahrscheinlich nur das Style Sheet verändert. Im Javascript musst du die Änderung natürlich auch noch umsetzen.

            Versuch es mit
            onMouseover="document.getElementById('navi2_sublinks').style.display='block'"
            zu anzeigen

            und
            onMouseout="document.getElementById('navi2_sublinks').style.display='none'"
            zum verbergen.

            Und enns noch immer nicht funktioniert zum anzeigen:
            onMouseover="document.getElementById('navi2_sublinks').style.display='block';document.getElementById('navi2_sublinks').style.visibility='visible'"

            Damit sollte es gehen...

            1. Und enns noch immer nicht funktioniert zum anzeigen:
              onMouseover="document.getElementById('navi2_sublinks').style.display='block';document.getElementById('navi2_sublinks').style.visibility='visible'"

              Damit sollte es gehen...

              Habe es so wie oben gemacht, schau dir jetzt mal die Seite an, jetzt verschwindet zwar die Lücke, taucht aber bei onmouseover wieder auf und die Untermenüs werden auch kein Block???

              1. Hallo ansgar1704,

                Habe es so wie oben gemacht, schau dir jetzt mal die Seite an, jetzt verschwindet zwar die Lücke, taucht aber bei onmouseover wieder auf und die Untermenüs werden auch kein Block???

                Nimm doch CSS statt JS.
                Also vom Prinzip:
                Ein li (die navi dann als ul), in dem der link ist und eine weitere ul, in der die Links sind. Das zweite ul wird standardmäßig ausgeblendet und erst beim hovern des oberen li (~= link) angezeigt.

                ul li ul { display:none; }
                ul li:hover ul { display:block; }

                Ausführlicher hier: CSS-basierte  Layouts / Navigationsleisten

                Viele Grüße aus Freiburg,
                Marian

                --
                Microsoft broke Volkswagen's world record: Volkswagen made only 22 million bugs!
                <!--[if IE]><meta http-equiv="refresh" content="0; URL=http://www.getfirefox.com"><[endif]-->