Hallo liebe Community,
ein kleines (wahrscheinlich sehr simples) Problem habe ich ebenfalls mit dem Menü. Das Menü an sich läuft wunderbar nur habe ich das ganze versucht mit transitions anzupassen, damit das Menü nicht so statisch daherkommt.
Mein Problem ist, wie schaffe ich es, dass bei li:hover im submenu der ganze Bereich abgedeckt wird und nicht die Hintergrundfarbe (Magenta) zu sehen
ist.
Bild_1.jpg
Bild_2.jpg
Sehr fein wäre natürlich auch noch das Untermenü über transform ein- bzw. auszublenden. Ich habe versucht das CSS dieser Demo in mein CSS zu integrieren, was leider nicht so ganz geklappt hat, deswegen habe ich das auch verworfen. Das Menü findet Ihr hier.
CSS:
Code:
#header .mod_navigation {
width:72.5%;
margin-top:2em;
margin-left:10em;
padding-left:23em;
background-color:#E82C0C;
border-radius:4px;
font-family:Roboto Slab,sans_serif;
color:#fff;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
#header .mod_navigation ul {
float:left;
margin:0;
padding:0;
list-style-type:none;
}
#header .mod_navigation li {
float:left;
margin:0;
transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
-webkit-transition: background-color 1s;
}
#header .mod_navigation li:hover {
background-color:#2B2B2B;
}
#header .mod_navigation a,
#header .mod_navigation span {
display:block;
padding:0 20px;
line-height:50px;
text-decoration:none;
color:#ececec;
}
#header .mod_navigation .active,
#header .mod_navigation .trail {
font-weight:bold;
color:#fff;
}
#header .mod_navigation .a:hover,
#header .mod_navigation .a:focus {
text-decoration:underline;
color:#fff;
}
--------------------------Hauptnavigation 2. Ebene
ausblenden--------------------------
* {
}
#header .mod_navigation .level_2 {
left:-32768px;
top:-32768px;
position:absolute;
overflow:hidden;
display:inline;
background-color:#E80C7A;
}
--------------------------Listenelemnte 2.Ebene
untereinander--------------------------
* {
}
#header .mod_navigation .level_2 li {
clear:both;
}
#header .mod_navigation li:hover .level_2 {
width:auto;
height:auto;
min-width:78px;
left:auto;
top:auto;
overflow:auto;
display:block;
z-index: 1000
}
--------------------------Hyperlinks und span
gestalten--------------------------
* {
}
#header .mod_navigation .level_2 a,
#header .mod_navigation .level_2 span {
font-size:13px;
line-height:32px;
font-weight:normal;
}
--------------------------Aktiven Menüpunkt
hervorheben--------------------------
* {
}
#header .mod_navigation .level_2 span.active {
font-weight:bold;
}
Ich bedanke mich an dieser Stelle schonmal und hoffe auf eine schnelle Antwort.
Viele Grüße, Stefan
Lesezeichen