Hallo,
Habe auf der Seite 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

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

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

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

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

Zitat von DirtyWorld

[...] 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.

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.

Code :

1 2 3 4 5 6 7

<!--[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.

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120

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ß

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

HTML-Code:

<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.

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.