Hallo an alle,
ich hätte ein Problem, dass eine Lösung braucht: Ich habe für eine Website, an der ich bastele mit CSS ein DropdownMenu erstellt (nach Vorlage) und gestylt (allein), bin dabei aber an eine für mich bisher unlösbare Aufgabe gestoßen. Hier der CSS Code
nav{
position: absolute;
width: 80%;
}
nav ul{
box-shadow: 0px 5px 7px #FBD800;
}
.dropdown,ul.dropdown li,ul.dropdown ul{
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown{
position: relative;
top: -24px;
z-index: 2;
float: left;
}
ul.dropdown li{
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
height: 24px;
width: 160px;
background: #808080;
opacity: 0.7;
}
ul.dropdown li:hover{
position: relative;
z-index: 4;
cursor: pointer;
opacity: 1;
}
ul.dropdown ul{
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 3;
width: 100%;
}
ul.dropdown ul li{
float: none;
}
ul.dropdown ul ul{
top: 1px;
left: 99%;
}
ul.dropdown li:hover>ul{
visibility: visible;
}
ul.dropdown a{
display: block;
color: #fbd800;
width: 150px;
padding: 4px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 16px;
}
ul.dropdown a:hover,ul.dropdown a:active{
text-decoration: none;
}
Dieser wird auf folgenden HTML-Code angewendet:
<ul id="nav" class="dropdown">
<li><a href="#">Home</a>
<ul>
<li><a href="#">Lorem</a></li>
<li><a href="#">ipsum</a></li>
</ul>
</li>
<li><a href="#">dolor</a>
<ul>
<li><a href="#">sit amet</a></li>
<li><a href="#">consectetur</a></li>
<li><a href="#">adipiscing</a></li>
<li><a href="#">elit</a></li>
</ul>
</li>
<li><a href="#">In quam</a>
<ul>
<li><a href="#">enim</a></li>
<li><a href="#">iaculis</a></li>
<li><a href="#">vel porta nec</a></li>
</ul>
</li>
<li><a href="#">sollicitudin</a></li>
<li><a href="#">sit amet leo</a></li>
</ul>Im Grunde ergibt das ein horizontales DropdownMenu mit durchscheinendem grauem Hintergrund, der bei hovern voll sichtbar wird. (Positionsangaben sorgen für den richtigen Platz in der Website). Mein Problem ist, dass die Links selbst bei dieser Lösung normal ebenfalls durchscheinend sind, was für schlechte Lesbarkeit sorgt, schließlich klappt das Menu auch über Text auf. Nun hätte ich gerne Hilfe bekommen, die beschreibt, wie man die Links dauerhaft auf opacity: 1; hält. Ich hab schon versucht, das einfach bei a{...} einzufügen, klappt aber nicht.