|
|||
Navigation dropdown nur bei cursor über erstem li ausfahren!
Hallo zusammen,
Wie kann ich verhindern, dass das Menü von "Songs" sich aufklappt, wenn ich den cursor ca 1-3 cm unter dem Menüpunkt "Songs" habe. Das Menü soll natürlich nur aufklappen, wenn der Cursor sich im Bereich "Songs" befindet! HTML-Code:
<ul class="navMain"> <li><a href="index.html">Home</a></li> <li><a href="#">Über uns</a></li> <li><a href="#">Songs</a> <ul> <li> <a href="#" class="trigger show">Songplayer</a> </li> <li> <a href="#">Reportoire Liste</a> </li> </ul> </li> <li><a href="#">Videos</a></li> <li><a href="#">Gallerie</a></li> </ul> Code:
/* navigation */ .navMain, .navMain ul, .navMain li, .navMain a { margin: 0 auto; padding: 0; border: none; outline: none; } .navMain { float:left; width:64%; background:white; float:right; text-align:center; font-size: 24px; border:none; margin-top:13%; margin-left:3%; margin-right:3%; z-index:999; position: relative; } .navMain li { position: relative; list-style: none; float: left; display: block; width:20%; } .navMain li a { display: block; line-height:44px; color:black; text-decoration: none; -webkit-transition: color .1s ease-in-out; -moz-transition: color .1s ease-in-out; -o-transition: color .1s ease-in-out; -ms-transition: color .1s ease-in-out; transition: color .1s ease-in-out; } .navMain li:hover{ -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out; } .navMain li:hover > a {color: black; border-bottom:1px solid #d5bd81;} .navMain ul li:hover a {color: #d5bd81; border-bottom:none;} .navMain ul { position: absolute; top: 44px; left: 0; opacity: 0; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; width:100%; } .navMain ul li { overflow: hidden; padding: 0; margin-left:-50%; color:black; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; margin-top:0px; width:200%; background:white; opacity:0.9; font-size:0.75em; } .navMain ul li a { color:black; line-height: 50px; -webkit-transition: color .0s ease-in-out; -moz-transition: color .0s ease-in-out; -o-transition: color .0s ease-in-out; -ms-transition: color .0s ease-in-out; transition: color .0s ease-in-out; } .navMain ul li:hover { background:white; } .navMain li:hover > ul { opacity: 1; } .navMain li:hover > ul li { height: 50px; overflow: visible; padding: 0; } Geändert von Timsen (15.07.2014 um 15:41 Uhr) |
Sponsored Links |
|
|||
Du gibst
.navMain li:hover > ul in deinem CSS an. Du versteckst die untergeordnete Liste allerdings nur optisch, den Platz nimmt sie trotzdem ein. Das heißt, dein listenelement ist die ganze Zeit so groß, dass es die untergeordnete Liste beinhaltet. Erstelle zuerst also einmal ein ordentliches dropdownmenü, dann hast du diese Probleme nicht. Am einfachsten danach googlen, da gibt es genügend Vorlagen. |
Sponsored Links |
|
|||
Hab den Fehler gefunden...
Hab bei Code:
.navMain ul li { } Code:
height: 0; Ist das denn wirklich so ein unsauberes Menü? Bis auf das floating links und dann rechts? Jetzt erst gesehen LG |
|
|||
Nein, so unsauber ist es nicht, das war etwas hart von mir formuliert. Verzeihung
Ich wollte nur keine Lösung ausarbeiten, da es schon genügend fertige solche Menüs im netz zu finden gibt (und wozu das Rad neu erfinden) Und ob du jetzt den Fehler ausbesserst oder ein Menü nachbaust und daraus lernst, ist im Grunde ja egal. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Ausrichtung Kalender | greece4u | CSS | 20 | 14.05.2012 14:32 |
Navigation ist nicht mittig | Schokokrapfen | CSS | 29 | 20.09.2011 00:19 |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |