Hallo Allerseits,
bei meinem Dropdown Menü vertikal erscheint ein Unterpunkt nicht neben dem Überpunkt, sondern ganz oben auf der Webseite
Woran liegt das?
html code
und hier Css:
Danke für eure Hilfe.
Seppeli
bei meinem Dropdown Menü vertikal erscheint ein Unterpunkt nicht neben dem Überpunkt, sondern ganz oben auf der Webseite
Woran liegt das?
html code
HTML:
<div class="navbar"> <ul class="nav">
<li><a href="../index.html">Startseite</a></li>
<li><a href="#">Projekt Rasenplatz</a>
<ul>
<li><a href="www.tv-mittelrhein.de"> TV Mittelrhein</a></li></ul></li>
<li><a href="#">Teams</a></li>
<li><a href="#">Tabelle</a></li>
<li><a href="#">Spielberichte</a></li>
<li><a href="#">Bilder</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Anmeldeformular</a></li>
<li><a href="#">Archiv</a></li
</div>und hier Css:
Code:
ul.nav { list-style: none; /* Hiermit wird die Listenmarkierung entfernt. */
border-top: 1px solid #666; /* Hiermit wird der obere Rand für die Hyperlinks erstellt. Alle anderen werden mit einem unteren Rand im LI-Element platziert. */
margin-bottom: 15px; /* Hiermit wird der Abstand zwischen den Navigationselementen und den Inhalten unten erstellt. */
}
ul.nav li {
border-bottom: 1px solid #666; /* Hiermit wird die Trennung der Schaltflächen erstellt. */
}
ul.nav a, ul.nav a:visited { /* Durch Gruppieren dieser Selektoren wird sichergestellt, dass die Hyperlinks auch nach dem Aufrufen die Form einer Schaltfläche beibehalten. */
padding: 5px 5px 5px 15px;
display: block; /* Hiermit werden die Blockeigenschaften für den Hyperlink angegeben, sodass das gesamte umschließende LI-Element aufgefüllt wird. Hiermit wird angegeben, dass der gesamte Bereich auf einen Mausklick reagiert. */
text-decoration: none;
background-color:#FFC;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background-color: #6F7D94;
color:#0F0;
}
ul.nav ul ,
ul.nav li:hover ul ul ,
ul.nav li:hover ul ul ul {
position:absolute;
left:-9999px;
top:0;
background:#000;
}
ul.nav li:hover ul ,
ul.nav ul li:hover ul ,
ul.nav ul ul li:hover ul {
left:20%; /* entspricht 150px */
}
ul.nav li:hover > a ,
ul.nav ul li:hover > a,
ul.nav ul ul li:hover > a,
ul.nav ul ul ul li:hover > a {
background:#a33;
color:#fff;
}Danke für eure Hilfe.
Seppeli
