Navigationsleiste

[ein Ivan ^-^]

ich habe eine Navigationsleiste mit den Listen tags (ul, li) erstellt, welche auch mit Untermenüs arbeitet, sobald du über einen Hauptpunkt fährst, öffnet sich eine Liste mit Untermenüs, nun mein Problem: ich kann vom Hauptmenüpunkt zum ersten Untermenüpunkt problemlos mit dem Curser drüberfahren, ab dem Abstand nach dem ersten Unterpunkt zum zweiten verschwindet das Untermenü wieder, da ich anscheinen außerhalb des Bereiches bin welcher das Untermenü Sichtbar macht. Cssteil der Navigation und Bild folgen:

#mainmenu {
    width: auto;
    height: auto;
    margin: -10px 0 0 0;
    float: right;
}

    ul#mainmenu {
    z-index: 2;
    margin: 0 10px 10px 0; padding: 0;
    text-align: center;
    }

    ul#mainmenu li {
    z-index: 3;
    width: auto;
    height: 30px;
    line-height: 30px;
    list-style: none;
    float: left;
    position: relative;
    margin: 0.4em; padding: 0;
    }

    *:first-child+html ul#mainmenu li {
    margin-bottom: -0.1em;
    }

    ul#mainmenu li ul {
    z-index: 4;
    margin: 10px; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;
    }

    *:first-child+html ul#mainmenu ul {
    background: url(images/ghost.png); padding-top: 10px;
    }
    ul#mainmenu li:hover ul {
    display: block;
    }
    ul#mainmenu li ul li {
    float: none;
    display: block;
    margin-top: 10px;
    left: -10px;
    }

    ul#mainmenu a, ul#mainmenu span {
    display: block;
    width: auto;
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    color: #61c000; background-color: #fff;
    }

    ul#mainmenu a:hover, ul#mainmenu span, li a#aktuell {
    color: black; background-color: #fff;
    }
  
    ul#mainmenu a:hover {
        margin: 2px auto 0 auto;
    }
  
    li a#aktuell {
    color: #61c000;
    margin: 2px 0 0 0;        
    }
  
    li a#aktuell:hover {
    margin: 2px 0 0 0;
    color: black;
    }
  
    ul#mainmenu li ul span {
    background: url(../images/bg2.png);
    }
  
        ul#mainmenu li ul li.kurz90, ul#mainmenu li.kurz90 {
        width: 90px;
        }
      
        ul#mainmenu li ul li.kurz110, ul#mainmenu li.kurz110 {
        width: 110px;
        }
      
        ul#mainmenu li ul li.kurz130, ul#mainmenu li.kurz130 {
        width: 130px;
        }

 

[Nikita]

Du musst den Abstand deiner Unterpunkte, anstatt mit margin, mit padding umsetzen.
Denn margin ist ja bekanntlich ein Außenabstand.
Dadurch wird der Hovereffekt, wenn du mit der Maus auf den Abstand(margin) triffst, aufgehoben, denn du befindest dich dann außerhalb des gehoverten Bereichs.
Eventuell musst du dadurch deine css-angaben noch etwas anpassen damit der "Freiraum" zwischen den Unterpunkten bestehen bleibt.