Aufklappmenü mit CSS: Farben Hintergrund und Links bei Hover
Hallo, ich habe mir von nachfolgender Seite ein kleines Aufklappmenü nachgebaut:
http://www.olivergast.de/blog/2015/05/12/css-ein-horizontales-dropdown-menue-reloaded/
Ich hätte nun gerne alle Links (Menü und Untermenü) rot dargestellt. Bei "Hover" sollen der Hintergrund rot und die Links weiß dargestellt werden. Leider verstehe ich nicht wie das funktioniert :/ Wenn ich die Links auf rot stelle, habe ich im Menü eine rote Schrift vor rotem Hintergrund, sobald der Mauszeiger über dem Untermenü ist. Weiß u.U. jemand weiter?
Vielen Dank!
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
float: left;
width: 100%;
background:grey;
font-size: 16px;
}
nav ul {
margin: 0;
padding: 0;
}
nav a {
display: block;
color:darkred;
text-align:center;
text-decoration: none;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #fff;
width:calc(100% / 5);
transition: 0.5s;
}
nav ul li a {
padding: 20px;
}
nav ul > li.submenu > a:after {
position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid darkred;
border-bottom: 5px solid transparent;
}
nav ul ul li.submenu > a:after {
margin-left: auto;
margin-right: -10px;
border-left: 5px solid #fff;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
nav ul li:hover{
background: darkred;
}
nav > ul > li:hover > a{
color:white;
}
nav ul li ul li:hover a{
color:white;
}
nav ul ul {
position: absolute;
top: -9999px;
left: -9999px;
background:grey;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
z-index: 1;
}
nav ul ul li {
width:calc(100vw / 5);
border-bottom: 1px solid #555;
}
nav ul ul li a {
padding: 10px 20px;
}
nav ul ul li:last-child {
border-bottom: none;
}
nav ul li:hover > ul {
top: 100%;
left: 0;
}
nav ul ul li:hover > ul {
top: 0;
left:calc(100vw / 5);
}
</style>
<nav>
<ul>
<li><a href="#" title="Nach Hause">Home</a></li>
<li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
<ul>
<li class="submenu"><a href="#" title="Unser Obstsortiment">Obst</a>
<ul>
<li><a href="#" title="Unsere Ananasauswahl">Ananas</a></li>
<li><a href="#" title="Unsere Apfelauswahl">Äpfel</a></li>
<li><a href="#" title="Unsere Birnenauswahl">Birnen</a></li>
<li><a href="#" title="Unsere Bananenauswahl">Bananen</a></li>
</ul>
</li>
<li class="submenu"><a href="#" title="Unser Gemüse">Gemüse</a>
<ul>
<li><a href="#" title="Unsere Kartoffelauswahl">Kartoffeln</a></li>
<li><a href="#" title="Unsere Salatauswahl">Salat</a></li>
<li class="submenu"><a href="#" title="Unser Rübensortiment">Rüben</a>
<ul>
<li class="submenu"><a href="#" title="Unsere Mohrrüben">Mohrrüben</a>
<ul>
<li><a href="#" title="frisch vom Feld">frisch</a></li>
<li><a href="#" title="aus dem Lager">nicht so frisch</a></li>
</ul>
</li>
<li><a href="#" title="Unsere Steckrüben">Steckrüben</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Das sind wir">Über uns</a></li>
<li><a href="#" title="So erreichen Sie uns">Kontakt</a></li>
<li><a href="#" title="Rechtliches">Impressum</a></li>
</ul>
</nav>