Navigation Listenmenü das sich per Mausclick öffnet

    Hallo,

    Ich möchte ein vertikales Navigationsmenü erstellen und
    habe mittels css nun ein Listenmenü mit rollovereffekt erstellt.
    Funktioniert auch.
    Ist mir allerdings zu unruhig, da in der Endfassung teilweise sehr viele listenpunkte hinzukommen.Wenn die ständig automatisch aufklappen verspringt dann halt immer alles und das surfen wird zum sportlichen Ereignis.

    Ich möchte das sich das Untermenü erst per Mausclick öffnet und dann komplett stehen bleibt.
    Nur finde ich nichts darüber, nur javascript Attribute und JS will ich nun absolut nicht verwenden.
    Kommt später mit einer Browserweiche für den IE-Schrott.
    Gibt es eine Möglichkeit das mit html/css zu machen ?

    hier kommt noch mal der code

    hmmm warum funzt das codetag nicht? Na gut sorry dann poste ich es mal so.


    <style type="text/css">
    body, a {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: white;
    }
    ul#Navigation {
    width: 140px;

    }
    ul#Navigation li {
    list-style: none;
    margin: 6px;
    padding: 4px;
    background-color: #FFFFFF;
    border-top: 2px solid #800000;
    border-right: 2px none #800000;
    border-bottom: 2px solid #800000;
    border-left: 2px none #800000;
    }
    ul#Navigation a {

    display:block;
    text-decoration: none; font-weight: bold;
    color: maroon; background-color: #FFFFFF;
    }
    ul#Navigation a:hover {
    color: white; background-color: #800000;
    }
    ul#Navigation h2 {
    list-style: none;
    margin: 6px;
    padding: 4px;
    background-color: #FFFFFF;
    border-top: 2px none #800000;
    border-right: 2px none #800000;
    border-bottom: 2px none #800000;
    border-left: 2px none #800000;
    }

    ul#Navigation li ul {
    width: 140px;
    margin: 0;
    padding: 0;

    }

    ul#Navigation li ul li {
    background-color: #800000;
    }
    ul#Navigation li ul li a {
    background-color: #800000;
    color: #FFFFFF;
    }
    ul#Navigation li ul li a:hover {
    background-color: #FFFFFF;
    color: #000000;
    border: 1px groove #800000;
    }
    /* Erweiterung zur dynamischen Ein-/Ausblendung */
    ul#Navigation li>ul {
    display: none; top: 1.6em;
    }
    ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
    display: block;
    }
    </style>
    </head>
    <body>
    <h1>Navigationsleiste ...</h1>

    <ul id="Navigation">
    [*]<h2>Rubrik 1</h2>
    <ul>
    [*]Beispiel 1
    [*]Beispiel 2
    [*]Beispiel 3
    [/list]

    [*]<h2>Rubrik 2</h2>
    <ul>
    [*]<span>aktuelle Seite</span>
    [*]Seite 5
    [*]Seite 6
    [/list]

    [*]<h2>Rubrik 3</h2>
    <ul>
    [*]Seite 7
    [*]Seite 8
    [*]Seite 9
    [/list]

    [/list]


    </body>

    Es liegt an dem Rand, den Du nur in ul#Navigation li ul li a:hover erzeugst. Entweder löscht Du border....., oder erzeugst unter ul#Navigation li ul li a ebenso einen Rand aber mit der Buttonfarbe, dass man den Rand nicht sieht.Den Rand mußt Du immer zu den Buttonmaße zurechnen ( Button 100px x 20px + umlaufender Rand = 102px x 22px) -->und darum springt Dein Menü.

    Code
    ul#Navigation li ul li a:hover {
background-color: #FFFFFF;
color: #000000;
!!!!!border: 1px groove #800000;!!!!löschen
}

    oder

    Code
    ul#Navigation li ul li a {
background-color: #800000;
color: #FFFFFF;border: 1px groove #800000;<--und Farbe anpassen
}

    Gruß yeti66 :wink: