CSS Submenu verschwindet

[Biwakscharte]

Hi Leute,

ich sitze jetzt schon seit einiger Zeit an einem reinen CSS Menu. Es funktioniert eigentlich alles super bis auf eins. Das Submenu welches bei Hover eines li erscheint, verschwindet sobald man etwas auswählen will.

Ich stelle euch mal einen Link zum Shop rein. Bin gerade am umbauen.

www.test.biwakscharte.de

Ich denke das es am z-index liegt, kann das Problem aber egal was ich versuche einfach nicht lösen. Das Submenu verschwindet einfach, sobald man es berühren will.

Vielen Dank für eure Hilfe!
Klasse Community

Linkback: https://www.modified-shop.org/forum/index.php?topic=22345.0

[web0null]

Hi,

der Aufbau ist etwas sonderbar, im Prinzip muss es etwa so sein:

Code: PHP  [Auswählen]

<ul id="category_menu">
  <li>
    <a>Titel 1</a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li>
    <a>Titel 2</a>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

Es gibt aber jede menge solcher Menü´s im Netz, da kannst du es dir anschauen wie das aufgebaut sein soll.

Gruß web0null

[web0null]

Nachtrag:

Sieh dir das Admin Menü an, da siehst du den Aufbau auch.

[hedon02]

Das Element was Du einblendest muss ein "child" des "hover-elementes" sein. Ansonsten funzt das nie. Webnull hat Dir die Loesung ja schon gepostet.

Gruesse

[Biwakscharte]

Ja normalerweise baue ich meine Menüs auch genau so auf wie webnull das beschrieben hat.
Allerdings möchte ich in diesem Fall das Dropdown absolut vom Hauptmenu (ul) platzieren, damit das Menu immer links bündig ist. Ich werde mir das morgen noch einmal genau ansehen und dann berichten ob ich die absolute position als child lösen konnte.

[web0null]

Irgendwo hier im Forum habe ich so ein Menü für modified eCommerce Shopsoftware schon gesehen, vielleicht kennt jemand den Link noch.
 

[hedon02]

das Dropdown absolut vom Hauptmenu (ul) platzieren

Gibst Du einfach dem "ul" ein "position:relative;" und nicht dem "li". Funktioniert so weit ich weiss bis runter zum IE 7.

Gruesse

[h-h-h]

www.hhacker.de/demoshop
Bei Interesse einfach eine Mail an mich.

Besten Gruß

h-h-h

[noRiddle (revilonetz)]

@Biwakscharte
Nur mal so als Tipp:
Du positionierst bei :hover auf li.level1 das li.drop neu.
Im Moment du jedoch mit der Maus auf das li.drop gehst, verlässt du ja aber das li.level1 und dein :hover ist nicht mehr aktiv.
Das liegt daran, daß du nicht verschachtelst wie z.B. von web0null vorgeschlagen.

Folgendes hinzuzufügen würde helfen, wenn es auch sehr unorthodox ist:

Code: CSS  [Auswählen]

#category_menu .drop:hover {left:0; top:100%;}

Gruß,
noRiddle

[Biwakscharte]

Hi Leute,

vielen Dank für die Tipps. Habe das ganze nun wieder verschachtelt, somit funktioniert der Hover wieder.
Habe den li.level1 ihr position: relative; genommen, damit .drop sich an der ul ausrichtet. Anschließend habe ich den <a> in li.level1 position: relative; gegeben, damit die css Pfeile die mit :before, :after generiert werden sich an den <a> ausrichten.

Somit funktioniert alles

[Biwakscharte]

Mhm einzig allein unser guter Ie7 hat ein komisches Hover verhalten. Das Dropdown verschwindet abundzu. Muss mir das nochmal genauer ansehen aber danke für eure Hilfe !

Wie ich feststellen konnte hat es etwas mit der Geschwindigkeit zu tun, mit welcher man den Mauszeiger vom Menü auf das Dropdown bewegt. Wenn das ganze sehr schnell passiert, funktioniert der Hover ansonsten verschwindet das Dropdown.

*edit

Habe das Problem gefixt. Es liegt daran, dass IE7 ein anderes Box Modell verwendet und ich ein border-bottom von 1px verwende. Wenn man nun langsam die Maus auf das Dropdown bewegt und über den border kommt, verschwindet der Hover. Gefixt habe ich das ganze, indem ich für IE7 das Dropdown 1px nach oben verschoben habe, so das es keine "Lücke" bzw keinen Border gibt. Eigentlich ist der Border ja keine Lücke... bloß beim IE^^

[noRiddle (revilonetz)]

Ja, der IE7 

Mit meinem Vorschlag oben hättest du das Menu übrigens nicht umbauen müssen.
Das funktioniert definitiv.

Gruß,
noRiddle

[web0null]

Dachte mir gestern auch das dass gehen könnte, wollte aber keinen Blödsinn schreiben, ohne es selbst zu testen, hatte nicht so viel Mut .

Aber so wie er es jetzt hat geht es wenigstens auch mit IE´s > 9, man kann ja nie wissen bei den IE´s

Gruß web0null

[Biwakscharte]

Jaja der gute IE egal welche Version immer wieder neue Tücken die Microsoft uns heimlich vor die Füße legt... vll schaut ihr mal bei meinem anderen Thread, wenn Ihr ein IE7 Problem lösen wollt, weil euch langweilig ist (4 Produkte / Zeile Thread) Es geht um ein Margin-left das vom IE7 ignoriert wird.

[noRiddle (revilonetz)]

Und wie wär's mit 'nem Link zum Thread ?
Oder meinst du wir suchen uns jetzt in der Forumssuche tot ?,
noch dazu wo die Suche sich bei Einzelzeichen (deine "4" und "/") beschwert ?

Gruß,
noRiddle