2016-11-28 18 views
0

Ich versuche, das Hauptmenü aktiv (Hintergrundfarbe gleiche Untermenühintergrundfarbe) zu machen, damit das, wenn das Untermenü des Hauptmenüs Farbe aktiv wird geöffnet, so habe ich versucht, es zu machen, aber nicht funktioniert Kann jemand bitte schauen, was mit meinem css falsch ist?Hauptnavigation aktiv, wenn das Untermenü geöffnet CSS

JSfiddle demo

nav { 
 
float: left; 
 
width: 100%; 
 
background: #6c9d1c; 
 
border-bottom: 5px solid #e57817; 
 
font-family: 'MyriadPro-Regular'; 
 
} 
 
nav > ul { 
 
list-style: none; 
 
margin: 0; 
 
padding: 0; 
 
font-size: 0; 
 
text-align: center; 
 
} 
 
nav > ul > li { 
 
list-style: none; 
 
padding: 0; 
 
margin: 0; 
 
position: relative; 
 
display: inline-block; 
 
} 
 
nav > ul > li > a { 
 
color: #fff; 
 
text-decoration: none; 
 
font-size: 16px; 
 
text-transform: uppercase; 
 
padding: 7px 17px 3px 17px; 
 
font-weight: 700; 
 
display: block; 
 
line-height: normal; 
 
} 
 
nav > ul > li > a:hover { 
 
background-color: #e57817; 
 
color: #fff; 
 
text-decoration: none; 
 
} 
 
nav > ul > li > ul { 
 
list-style: none; 
 
padding: 0; 
 
margin: 0; 
 
display: none; 
 
position: absolute; 
 
left: 0; 
 
top: 30px; 
 
width: 100%; 
 
text-align: left; 
 
} 
 
nav > ul > li:hover ul { 
 
display: block; 
 
} 
 
/*main menu active on submenu open*/ 
 
nav > ul > li > ul > li > a:hover nav > ul > li > a:hover { 
 
background-color: #e57817; 
 
} 
 
/*Submenu*/ 
 
nav > ul > li > ul > li { 
 
padding: 0; 
 
margin: 0; 
 
list-style: none; 
 
display: block; 
 
} 
 
nav > ul > li > ul > li > a { 
 
display: block; 
 
background: #e57817; 
 
color: #fff; 
 
font-size: 14px; 
 
font-family: Arial; 
 
border-bottom: 1px solid #fcb65a; 
 
padding: 8px 20px; 
 
} 
 
nav > ul > li > ul > li > a:hover { 
 
background-color: #fcb65a; 
 
color: #fff; 
 
text-decoration: none; 
 
}
<nav> 
 
    <ul> 
 
    <li><a href="corporate-training/">Main Menu</a> 
 
     <ul> 
 
     <li><a href="corporate-training/">Submenu one</a></li> 
 
     <li><a href="soft-skills-training/">Sub Menu Two</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Antwort

1

Sie verwenden den :hover Wähler auf <a> was bedeutet, dass, wenn der Cursor über den <ul> der Text in <a> nicht mehr hovered bewegt wird. Die <ul> ist immer noch ein Teil der übergeordneten <li> aber so ändern:

nav > ul > li > a:hover { 

zu

nav > ul > li:hover { 

Hier ist eine aktualisierte Geige: https://jsfiddle.net/nc5yqah9/2/

+0

Dank, seine Arbeit gut, ich dachte, es li zu machen schweben, aber nicht versuchen –

Verwandte Themen