habe jetzt mal alle Selektoren, die die 1. Ebene betreffen, mit level_1 erweitert und die 2. Ebene mit level_2
Code:
#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation,
#header .mod_navigation a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
#header .mod_navigation ul.level_1 {
height: 40px;
width: 960px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header .mod_navigation ul.level_1 li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
#header .mod_navigation ul.level_1 li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
#header .mod_navigation ul.level_1 li:first-child a { border-left: none; }
#header .mod_navigation ul.level_1 li:last-child a{ border-right: none; }
#header .mod_navigation ul.level_1 li:hover > a { color: #8fde62; }
#header .mod_navigation ul.level_2 {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
#header .mod_navigation li:hover > ul.level_2 { opacity: 1; }
#header .mod_navigation ul.level_2 li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
#header .mod_navigation li:hover > ul.level_2 li {
height: 36px;
overflow: visible;
padding: 0;
}
#header .mod_navigation ul.level_2 li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
#header .mod_navigation ul.level_2 li:last-child a { border: none; }
der Unterschied zu meinem Code von vorher ist eigentlich nur im 1. grösseren Codeblock, wo die Höhe von 40px und die Breite von 960px definiert sind, hier habe ich von "#header .mod_navigation" auf "#header .mod_navigation ul.level_1" geändert, bei allen anderen Selektoren hatte ich das schon.
Jetzt mir dem Ergebnis, dass das Titelbild etwas nach unten geschoben wurde, mit dem Firebug sieht es so aus als da wo ein Padding nach unten greifen würde, aber ich finde einfch nicht, wo. Aber man sieht, dass das Menü nach unten ausklappen würde, jedoch genau da abgeschnitten, wo das Titelbild anfängt. Anfangs dachte ich, dass das Menü vielleicht hinter dem Bild ausklappt, aber auch wenn ich das Bild per Magrin viel weiter runtersetze, wird das Menü trotzdem an der besgaten Kante abgeschnitten :/
Lesezeichen