Hallo, ich habe mir von nachfolgender Seite ein kleines Aufklappmenü nachgebaut:
http://www.olivergast.de/blog/…-dropdown-menue-reloaded/
Mein CSS/HTML sieht beispielhaft so aus:
HTML
<html>
<head>
<style>
nav {
box-sizing: border-box;
font-size: 1em;
width: 100%;
}
nav ul {
float: left;
margin: 0;
padding: 0;
}
nav a {
color: darkred;
text-decoration:none;
display: block;
}
nav ul li {
position: relative;
float: left;
list-style: none;
}
nav ul li:hover {
background: darkred;
}
nav ul li:hover a {
color:white;
}
nav ul li:hover a:hover {
color:white;
}
nav ul li a {
padding: 4px 8px;
}
nav ul ul {
position: absolute;
top: -9999px;
left: -9999px;
background: black;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
}
nav ul ul li {
float: none;
width: 150px;
border-bottom: 0.1em solid #555;
}
nav ul li:hover > ul {
top: 100%;
left: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Punkt 1</a>
<ul>
<li><a href="#">Unterpunkt 1a</a></li>
<li><a href="#">Unterpunkt 1b</a></li>
</ul>
</li>
<li><a href="#">Punkt 2</a>
<ul>
<li><a href="#">Unterpunkt 2a</a></li>
<li><a href="#">Unterpunkt 2b</a></li>
</ul>
</li>
<li><a href="#">Punkt 3</a>
<ul>
<li><a href="#">Unterpunkt 3a</a></li>
<li><a href="#">Unterpunkt 3b</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Alles anzeigen
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!