zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navigation dropdown nur bei cursor über erstem li ausfahren!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2014, 12:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2014
Beiträge: 5
Timsen befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2014, 13:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2014, 15:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 10.07.2014
Beiträge: 5
Timsen befindet sich auf einem aufstrebenden Ast
Standard

Hab den Fehler gefunden...

Hab bei

Code:
.navMain ul li {
}
den Wert:
Code:
height: 0;
hinzugefügt. Jetzt funktioniert es einwandfrei!


Ist das denn wirklich so ein unsauberes Menü?
Bis auf das floating links und dann rechts? Jetzt erst gesehen

LG
Mit Zitat antworten
  #4 (permalink)  
Alt 15.07.2014, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:42 Uhr.