Problem bei Dropdownmenü. Submenü öffnet sich zu früh

[Jan-Frederik Stieler]

Hallo,
Habe auf der Seite http://www.fdz-stieler.de/test das Suckerfishmenü verwendet. Mein Problem ist nun das sich ab dem zweiten Menüpunkt das Submenü schon öffnet wenn ich nur etwas unter dem ersten Menüpunkt mit der Maus bin, also ohne das ich den Textlink berührt habe. Ich bekomme einfach nicht raus woran das liegt.
Wäre nett wenn mir da jemand eine Hilfestellung geben könnte.

Viele Grüße

 

[Maik]

Es dürfte wohl an der CSS-Eigenschaft padding-top für die Listenpunkte der ersten Menüebene liegen.

 

[Jan-Frederik Stieler]

Ja daran lags. Mir wahr nicht klar das ein Paddingbereich zu einem Objekt gehört.
Nur wird jetzt dummerweise der Background nicht mehr angezeigt.

 

[Maik]

Naja, Du mußt dann auch die Positionsangaben der Hintergrundgrafik anpassen

 

[Jan-Frederik Stieler]

Das war mir schon klar nur hab ich übersehen das nun natürlich die Top-Werte nicht mehr benötigt werden.
Jetzt hab ich noch zwei Probleme und zwar einmal stimmen mal wieder die Positionen des Menüs im IE nicht mit denen im FF überein.
Und habe ich noch die Überlegung wie man das realisieren kann das das Submenü solange angezeigt wird bis ich wieder einen anderen Punkt im Hauptmenü überfahre. Warscheinlich benötige ich dafür JS.

Viele Grüße

 

[Maik]

[...] stimmen mal wieder die Positionen des Menüs im IE nicht mit denen im FF überein.

In diesem Fall wirst Du mit Hilfe eines Conditional Comments die Positionsangaben für den IE korrigieren müssen.

 

[Jan-Frederik Stieler]

Sorry wenn ich schon wieder nerv . Wenn ich nun eine Browserweiche in die CSS mit einbaue wird das Submenü direkt über dem ersten Menü eingeblendet.
Wende ich die CC irgendwie falsch an oder was.

<!--[if gte IE 5]>
ul li.einsfuenf {
         top:183px;
         padding-left:60px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:60px
         }
<![endif]-->

ich kann das doch so auch direkt in eine externe CSS-Datei einbinden. Zumindest habe ich das so verstanden das das geht.
Das Problem des IE ist eigentlich nur das der letzte Menüpunkt zu weit unten angezeigt wird, die anderen Stimmen. Was wiederum etwas unlogisch ist das alle nachdem gleichen Schema positioniert wurden.

ul {     position:absolute;
	top: 102px;
         margin: 0;
	padding: 0;
	list-style: none;
	width: 181px; /* Width of Menu Items */
         height:300px;
	}

ul li {
	position:relative;
                  	}

ul li.einseins {
         padding-left:60px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:60px;
         	}
ul li.einszwei {
         top:44px;
         padding-left:33px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:33px
                  	}
ul li.einsdrei {
         top:87px;
         padding-left:18px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:18px
                  	}
ul li.einsvier {
         top:139px;
         padding-left:33px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:33px
	}

ul li.einsfuenf {
         top:191px;
         padding-left:60px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:60px
         }

<!--[if gte IE 5]>
ul li.einsfuenf {
         top:183px;
         padding-left:60px;
         background: url(../pics/punktnichtanimation.gif); background-repeat:no-repeat; display:block; width:181px; background-position:60px
         }
<![endif]-->

/* Styles for 2. Submenü */
li ul{
         position:absolute;
         left: 180px; /* Set 1px less than menu width */
         display: none;
   	}

li ul.zweieins {
         top: 0;
	}

li ul.zweizwei {
	top: -67px;
	}

li ul.zweidrei {
	top: -132px;
	}

li ul.zweivier {
	top: -205px;;
	}

li ul.zweifuenf {
	top: 0px;
	}

li.zweizweieins {
         top:0px;
         padding-left:40px;
         	}
li.zweizweizwei {
         top:44px;
         padding-left:20px;
         	}
li.zweizweidrei {
	top:87px;
         padding-left:15px;
         	}
li.zweizweivier {
	top:139px;
         padding-left:20px;
         	}
li.zweizweifuenf {
         top:191px;
         padding-left:40px;
         	}




/* Styles for Menu Items */
ul li a {
	display: block;
	text-decoration: none;
	color: #777777;
	background: transparent; /* IE6 Bug */
	padding: 3px;
	border-bottom: 0;
	}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


ul li a:hover { color: #FF0000; background: url(../pics/punktanimation.gif); background-repeat:no-repeat; display:block; width:181px;} /* Hover Stylesfor primary menue */
li ul li a:hover { color: #FF0000; background: none; width:250px;} /* Hover Stylesfor secondary menue */

li ul li a { width:250px;} /* Sub Menu Styles */

li:hover ul, li.over ul { display: block;} /* The magic */

Gruß

 

[Maik]

Der Conditional Comment wird nach dem "normalen" Stylesheet notiert:

<link rel="stylesheet" type="text/css" href="style.css">
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->

Probier es auf diesem Weg und lade die aktualisierte Testversion auf den Server, damit man da einen Blick drauf werfen kann.

 

[Jan-Frederik Stieler]

Hi, also das ist nur der IE7 der da so gravierende Probleme macht, die anderen IE´s funktionieren. Aber ich hab auch noch die Beta3 warscheinlich liegts daran.