navi formatierung liste level_2 springt hin und her

bei der navigation verändert sich der linke innenabstand aller zu dem punkt gehörigen listenelementen zwischen inaktiven und aktiven zusand, obwohl der quelltext "gleich" bleibt bzw. nur die klasse .active hinzugefügt wird

ein screenshot ist im anhang zur verdeutlichung

ohne aktiven listenunterpunkt

HTML-Code:

---

<ul class="level_1">
<li class="active submenu hydroblau"><span class="active submenu hydroblau">Hydrogeologie | Geotechnik</span>
<ul class="level_2">
<li class="first"><a href="index.php/hydrogeo_dienstleistungen.html" title="Dienstleistungen" class="first" onclick="this.blur();">Dienstleistungen</a></li>
<li class="last"><a href="index.php/hydrogeo_referenzen.html" title="Referenzen" class="last" onclick="this.blur();">Referenzen</a></li>
</ul>
</li>
</ul>

---

mit aktiven listenunterpunkt

HTML-Code:

---

<ul class="level_1">
<li class="submenu hydroblau trail"><a href="index.php/hydrogeologie.html" title="Hydrogeologie | Geotechnik" class="submenu hydroblau trail" onclick="this.blur();">Hydrogeologie | Geotechnik</a>
<ul class="level_2">
<li class="first"><a href="index.php/hydrogeo_dienstleistungen.html" title="Dienstleistungen" class="first" onclick="this.blur();">Dienstleistungen</a></li>
<li class="active last"><span class="active last">Referenzen</span></li>
</ul>
</li>
</ul>

---

das navigations css

PHP-Code:

---

#submenu li {
    display: block;
    margin-bottom: 10px;
    line-height: 1.5em;
}
#submenu a, #submenu a:link, #submenu a:active, #submenu a:focus {
    display: block;
    padding-left: 18px;
    color: #444;
}
#submenu a:hover {
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    text-decoration: underline;
    color: #003789;
    background-position: 0 6px;
}
#submenu ul.level_1 ul {
    margin-bottom: 0;
}
#submenu .level_2 li {
    margin-bottom: 0;
    padding-left: 18px;
}
#submenu a.trail {
    color: #003789;
}
#submenu ul.level_1 li a.trail, #submenu ul.level_1 li.active {
    padding-left: 18px;
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    background-position: 0 6px;
}
#submenu ul.level_2 li a.trail, #submenu ul.level_2 li.active {
    padding-left: 36px;
    background-image: none;
}

#left .mod_navigation .hydroblau {
    color: #00378b;
}
#left .mod_navigation .hydrogruen {
    color: #006436;
}
#left .mod_navigation .cyan {
    color: #41a3d7;
}
#left .mod_navigation .hellgruen {
    color: #6ab023;
}
.active {
    color: #003789;
}
#left .mod_navigation span.verfahren.active, #left .mod_navigation span.energie.active {
    color: #41A3D7;
}
#left .mod_navigation li.verfahren a:hover, #left .mod_navigation li.energie a:hover {
    text-decoration: underline;
    color: #41A3D7;
} 


---

ich komm einfach nicht drauf, wo die ursache liegt

danke für eure hilfe

womöglich hat es mit der kaskade des css zu tun
siehe angehängte grafik

navi_level_1_aktiv
das padding der klasse "active" erstreckt sich über die listenpunkte von level_2 und von dort weg das padding der links.

navi_level_2_aktiv
das padding der klasse "active" erstreckt sich nur über den listenpunkt von level_1
der aktive listenpunkt level_2 hat ein padding von der klasse trail mit 36 px, der normale listenpunkt level_2 als link hat ein padding von 18 px

das padding der klasse "aktiv" wirkt sich jeweils anders aus
wo könnte die ursache sein ?

danke für tipps

falls es wen interessiert

ich hab jetzt das ganze noch einmal neu formtiert, jetzt funktioniert das ganze

PHP-Code:

---

#mainmenu {
    height: 50px;
    left: 50px;
    top: 50px;
    position: absolute;
}
#mainmenu li {
    float: left;
    line-height: 1;
}
#mainmenu a, #mainmenu span {
    margin-right: 40px;
    text-decoration: none;
    font-size: 14px;
    color: #4b4b4b;
    text-transform: uppercase;
}
#mainmenu a:hover, #mainmenu span, #mainmenu a.trail {
    position: relative;
    border-bottom: 2px solid #003789;
    color: #003789;
}
#mainmenu li.login, #mainmenu li.register {
    float: right;
}
#mainmenu a.login, #mainmenu span.login {
    border-left: 1px solid #999;
}
#left .mod_navigation>ul>li {
    margin-bottom: 10px;
    line-height: 1.5em;
}
#left .mod_navigation>ul>li>a, #left .mod_navigation>ul>li>.active {
    display: block;
    padding-left: 18px;
    color: #444;
}
#left .mod_navigation>ul>li>a:hover {
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    text-decoration: underline;
    background-position: 0 6px;
}
#left .mod_navigation>ul>li>.active, #left .mod_navigation>ul>li>.trail {
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    color: #003789;
    background-position: 0 6px;
    text-decoration: none;
}
#left .mod_navigation>ul>li>a:focus, #left .mod_navigation>ul>li>a:active {
    color: #D0D0D0;
}
#left .mod_navigation>ul>li>.active {
    color: #003789;
}
#left .mod_navigation>ul>li>ul {
    margin: 0;
    padding: 0;
}
#left .mod_navigation>ul>li>ul>li {
    list-style-type: none;
}
#left .mod_navigation>ul>li>ul>li>a {
    color: #4b4b4;
}
#left .mod_navigation>ul>li>ul>li>a, #left .mod_navigation>ul>li>ul>li>.active {
    display: block;
    padding-left: 36px;
}
#left .mod_navigation>ul>li>ul>li>a:hover, #left .mod_navigation>ul>li>ul>li>a:focus, #left .mod_navigation>ul>li>ul>li>a:active {
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    text-decoration: underline;
    color: #003789;
    background-position: 0 6px;
}
#left .mod_navigation>ul>li>ul>li>.active {
    background-image: url("tl_files/hydro_layout/pfeil_navi_707070.gif");
    background-repeat: no-repeat;
    color: #003789;
    background-position: 18px 6px;
}
#left .mod_navigation>ul>li> .hydroblau {
    color: #00378b;
}
#left .mod_navigation>ul>li> .hydrogruen {
    color: #006436;
}
#left .mod_navigation>ul>li> .hellgruen {
    color: #6ab023;
}
#left .mod_navigation>ul>li> .cyan {
    color: #41a3d7;
}
#left .mod_navigation span.verfahren.active, #left .mod_navigation span.energie.active {
    color: #41A3D7;
}
#left .mod_navigation ul>li.verfahren a:hover, #left .mod_navigation ul>li.energie a:hover {
    text-decoration: underline;
    color: #41A3D7;
} 


---