CSS-Menü - Halten Eltern schwebte, während der Fokus auf Untermenü
Ich würde gerne halten die Eltern hover Farbe die gleiche, wenn die Navigation die Sekundär-Menü.
Ich schaute auf ein paar andere Antworten wie hier und hier, aber ich war nicht in der Lage, um es herauszufinden.
Hier ist ein video zu erklären, was ich gerne erreichen: http://screencast.com/t/Bhfj6mtZkPZp
Hier ist die navigation code:
.primary-navigation {
max-width: 1192px;
margin: 20px 0px 52px 1px;
}
.primary-navigation ul {
font-family: 'Josefin Sans', sans-serif;
font-size: 18px;
font-size: 1.125rem;
font-weight: bold;
margin: 0;
padding: 0;
list-style: none;
}
.primary-navigation ul li {
display: block;
position: relative;
float: left;
}
.primary-navigation li ul {
display: none;
}
.primary-navigation ul li a {
display: block;
text-decoration: none;
color: #fff;
background: #ec6397;
padding: 12px 22px 17px 22px;
white-space: nowrap;
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
border-right: 1px solid #f39cbd;
}
.primary-navigation ul li a:hover {
background: #f39cbd;
}
.primary-navigation li:hover ul {
display: block;
position: absolute;
border-top: 1px solid #f39cbd;
border-left: 1px solid #f39cbd;
}
.primary-navigation li:hover li {
float: none;
width: 300px;
z-index: 3;
border-bottom: 1px solid #f39cbd;
}
.primary-navigation li:hover a {
background: #ec6397;
}
.primary-navigation li:hover li a:hover {
background: #f39cbd;
color: #000;
}
Bitte fügen Sie Ihrem html-Frage. Auch ein jsfiddle.net zeigen Sie Ihre Frage wäre hilfreich.
InformationsquelleAutor alexhoug | 2013-04-19
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sie hould in der Lage sein, dies zu ändern
zu diesem
Diese Weise die Farbe Ihrer main-nav-Element wird geändert, wenn Sie die Maus über das übergeordnete li. Da das Untermenü sollte auch innerhalb dieses li, das schweben wird immer noch ausgelöst werden, wenn das verschieben über das Untermenü, so dass die Farbe der link sollte auch halten Sie den hover-Zustand.
InformationsquelleAutor Pevara