Vertikale Navigation

**skuhrt** · 10.01.2012, 12:45

Ich habe ein kleines Problem, und zwar ein vertikal Menü mit 2 Leveln.

Wenn ich nun einen Menüpunkt aufrufe, der einen Level2 hat, dann überlappt Level2 das Level1. Habe ich in den CSS-Deifintionen etwas vergessen? Herzlichen Dank für eure Hilfe.

CSS-Code:

Code:

#main .mod_navigation ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}

#main .mod_navigation li
{
    margin:0;
    padding:0;
    text-align:center;
    border-bottom:1px solid #ccc;
    color:#000000;
}

#main .mod_navigation
{
    width:240px;
    border-top:1px;
    border-bottom:1px;
}

#main .mod_navigation a,
#main .mod_navigation a:link,
#main .mod_navigation a:visited
{
    height:22px;
    display:block;
    padding:8px 0 0;
    text-decoration:none;
    color:#000000;
}

#main .mod_navigation a:hover
{
    background-color:#e9e9e9;
    color:#000000;
}

#main .mod_navigation li.active
{
    height:22px;
    margin:0;
    padding:8px 0 0;
    border-top:0px solid #cccccc;
    border-right:0px solid #cccccc;
    border-bottom:1px solid #cccccc;
    border-left:0px solid #cccccc;
}

#main .mod_navigation .level_1 a
{
    height:25px;
    display:block;
}

**bizon** · 10.01.2012, 15:26

Hallo,

das liegt an den verschiedenen Höhenangaben und sich dadurch überschneidente Tags.
Für diese einfache Navi würde ich die Höhenanweisungen nur über ein padding bei a und span machen.

Dieses wesentlich gekürzte CSS sollte reichen.

Code:

#main .mod_navigation
{
    width:240px;
    border-top:1px;
}

#main .mod_navigation ul
{
    margin:0;
    padding:0;
    list-style-type:none;
}

#main .mod_navigation li
{
    margin:0;
    padding:0;
    text-align:center;
}

#main .mod_navigation a
#main .mod_navigation span
{
    display:block;
    padding:4px 0;
    text-decoration:none;
    color:#000000;
    border-bottom:1px solid #ccc;
}

#main .mod_navigation a:hover
{
    background:#e9e9e9;
}