G
Grasdackel96
Guest
Hallo liebes Forum,
ich sitze schon seit mehr als einer Stunde vor meinem Bildschirm und weiß nicht mehr weiter. Mein Ziel ist es, in CSS3 ein dropdown-menü zu erstellen. Das Menü ist auch schon fast fertig, allerdings ergibt sich folgendes Problem:
(Links sind zur beseren Sichtbarkeit grün eingefärbt.)
CSS:
HTML:
ich sitze schon seit mehr als einer Stunde vor meinem Bildschirm und weiß nicht mehr weiter. Mein Ziel ist es, in CSS3 ein dropdown-menü zu erstellen. Das Menü ist auch schon fast fertig, allerdings ergibt sich folgendes Problem:
(Links sind zur beseren Sichtbarkeit grün eingefärbt.)
CSS:
Code:
ul
{
margin: 0px;
padding: 0px;
}
ul#navigation ul, ul#navigation ul li ul
{
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 99999;
background-color: #404040;
width: 200px;
list-style: none outside none;
-webkit-transition: opacity 0.5s linear, visibility 0.5s linear;
-moz-transition: opacity 0.5s linear, visibility 0.5s linear;
-o-transition: opacity 0.5s linear, visibility 0.5s linear;
transition: opacity 0.5s linear, visibility 0.5s linear;
}
.dropdown
{
background-color: #404040;
list-style-type: none;
margin-left: -10px;
margin-top: 10px;
width: 200px;
}
HTML:
HTML:
<nav id="menu">
<ul id="navigation">
<li class="menuitem firstitem" id="activeitem"><a href="#">Startseite</a></li>
<li class="menuitem"><a href="#">Über mich</a></li>
<li class="menuitem"><a href="#">Geschichten</a></li>
<li class="menuitem">
<a href="#">Links</a>
<ul class="dropdown">
<li><a href="#" class="borderbottom">zu anderen Autoren</a></li>
<li>
<a href="#" class="borderbottom">zu Verlagen</a>
<ul>
<li><a href="#" class="borderbottom">1. Verlag</a></li>
<li><a href="#">2. Verlag</a></li>
</ul>
</li>
<li><a href="#" class="borderbottom">Testlink 1</a></li>
<li><a href="#" class="borderbottom">Testlink 2</a></li>
<li><a href="#" class="borderbottom">Testlink 3</a></li>
<li><a href="#">Testlink 4</a></li>
</ul>
</li>
<li class="menuitem"><a href="#">Gästebuch</a></li>
</ul>
</nav>