Bin jetzt so weit, dass sobald man mit der Maus über dem einen Feld ist, das Dropdown-Menü "rauskommt", jedoch auf der gleichen Höhe, und nicht etwas weiter unten...
Da das Menü aus einigen Tutorials zusammengeworfen ist, kann es gut sein, dass ich dort inzwischen was doppelt habe oder so, aber ich steige hier atm nicht mehr durch..
Meine horizontale Leiste, welche wunderbar funktioniert. Beim drüber fahren ändert sich die Farbe:
a:link { color: #FF6600; } a:visited { color: #FF944C; } a:hover, a:active, a:focus { color: #7F3300; text-decoration: underline; } #mainnav ul { list-style-type: none; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } #mainnav a { width: 25%; display: block; float: left; text-transform: uppercase; background-color: #F99736; color: #FFFFFF; padding-top: 6px; padding-bottom: 6px; text-align: center; } #mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage { background-color: #9EC524; text-decoration: none; }
So, jetzt das Dropdown Menü, welches einfach an einen Punkt aus dem horizontalen Menü unten drunter dran soll:
div {cursor:default;} #menu li ul{display:none; position: relative;} #menu li:hover ul {display: block; position: absolute;} #menu li ul li {background-color:#9EC524;} #menu li ul li a{color:#FFFFFF;} #menu li ul li:hover {background-color:#9EC524;}
Meine Leiste in HTML:
<nav id="mainnav"> <ul id="menu"> <li><a href="#">Test_oben1</a> <ul> <li><a href="#">Testseite_dropdown</a></li> <li><a href="#">Testseite_dropdown2</a></li> </ul> </li> <li><a href="#" class="thispage">Testseite_oben2</a></li> <li><a href="#">Testseite_oben3</a></li> <li><a href="#">Testseite_oben4</a></li> </ul> </nav>
Wäre echt klasse, wenn mir wer die Zeile Code schreiben könnte.. Aktuell "dropt" das Menü halt nicht, sondern erscheint einfach etwas weiter links von dem Menüpunkt...
Dieser Beitrag wurde von R4M1N bearbeitet: 08. Oktober 2015 - 20:06