Dropdown verhält sich komisch

[maggus]

Hallo,

habe gerade ein dropdown menü nach "suckerfish-art" gemacht.

Nun habe ich 2 Probleme:

Unter FF klappt das Menü auch schön auf, aber ich kann nicht über die Untermenüs fahren, da es sich sofort wieder zuklappt.

Unter IE7 passiert beim Überfahren Toplevel-links gar nichts.

Könnt ihr mir da weiterhelfen? Ich stehe so ziemlich auf dem Schlauch...

Die CSS-Datei die ich verwende ist hier gespeichert...

Das Menü ist hier zu sehen: www.dilectro.com/eubiq

Ich danke euch im voraus!

[onemorenerd]

li:hover gibt es nicht, die Pseudoklasse hover existiert nur für a-Tags.
Wenn man dein a-Tag hovert, wird das Submenü zwar richtig positioniert (aufgeklappt), aber um die Maus auf das Submenü zu bewegen, muß man das a-Tag verlassen. Damit verliert es die Pseudoklasse hover wieder und das Submenu verschwindet.

Entweder packst du das Submenu komplett in das a-Tag (nicht ratsam) oder positionierst es mittels onmouseover-Event (das geht dann auch am li-Tag).

[maggus]

Danke dir erstmal für die schnelle Antwort.

Ich habe nun gelesen, dass dieses Script noch eingefügt werden muss:

 <script type="text/javascript">
    <!--
      sfHover = function() {
        var sfEls = document.getElementById("mainlevel-down").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
          sfEls[i].onmouseover = function() {
            this.className += " sfhover";
          }
          sfEls[i].onmouseout = function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
          }
        }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);
    //-->
  </script>
  <!-- ... --> 

da wird ja schon gemacht, was du vorschlägst, oder?

Nach dem einfügen sieht man nun auch unterm IE7 das Menü, nur verschwindet es immer noch.

Muss ich ein weiteres JS einfügen?

P.S: li:hover habe ich jetzt aber schon mermals gesehen, z.B. unter http://css.maxdesign.com.au/listamat...rizontal04.htm
Handelt es sich da um etwas anderes als das von dier beschriebene?

[Kropff]

li:hover habe ich jetzt aber schon mermals gesehen

funzt aber nicht im ie 6.

gruß
peter

[maggus]

Hach ja, immer diese Kompatibilitätsprobleme ^^...

Und wie steht es mit dem von mir eingefügten JS und meiner diesbezüglichen Frage?

[Patrick_PQ]

Hallo maggus,

ich nutze für meine Seiten etwas ähnliches - das JavaScript benötigst du für den IE. Das schreibt beim Eintreten von OnMouseOver eine zusätzliche CSS Klasse und entfernt diese auch wieder beim Verlassen.

Was in deinem CSS unter li:hover steht müsste auch für sfhover gelten - sfhover wird vom JavaScript in den jeweiligen li-Tag geschrieben.

Gruß
Patrick

[maggus]

Hallo Patrick,

und bei dir funktioniert das Ganze mit ähnlichem Aufbau ohne Probleme?

[Patrick_PQ]

ja - und zwar ab IE5 aufwärts und im FF

Wichtig ist, dass du über das obige JS eine zusätzliche Klasse in die LIs schreiben lässt wenn onMouseOver eintritt. Die LI erhalten dann die F ormatierung über die Klasse sfhover (IE) bzw. LI:hover (restliche Browser). Im CSS etwa so:

#menu li:hover ul, #menu li.iehover ul{
    left:auto;
}

#menu ist bei mir das div für die Menüzeile, die Klasse für den IE habe ich iehover - bei dir sfhover - genannt. Allerdings habe ich das Menü horizontal und nicht vertikal - sollte jedoch egal sein, das Prinziep bleibt das gleiche ...

Vielleicht gehst du den Aufbau von CSS und HTML noch einmal nach dem Beispiel von suckerfish durch - nach deinen ganzen Versuchen ist evtl. etwas durcheinander geraten?

Gruß
Patrick

[maggus]

Hmm, ja sieht so aus wie das, was ich in meiner CSS stehen habe:

/**
 * Show the submenus on mouse-over (.hover class)
 */
#mainlevel-down li:hover ul {
  left: auto;
}

/**
 * IE fix ... Javascript Fix
 */
#mainlevel-down li.sfhover ul {
left: auto;
} 

Habe jetzt noch einmal die CSS angesehen, aber es hängt immer noch daran, dass, wie onemorenerd sagt, die hover condition nicht mehr da ist, sobald ich auf das untere Feld gehe...

//Edit:

Ich habe mir jetz einmal den ausgeworfenen Quellcode angesehen.

<div id="topmenu">



<ul  id="mainlevel-down">
<li><a href="index.php" class="mainlevel-down" title="Accueil">Accueil</a>
<ul >
<li>
<a href="index.php?option=com_contact&amp;Itemid=3" class="sublevel-down" title="Nous contacter">Nous contacter</a>
</li>
<li>
<a href="gaga.html" class="sublevel-down" title="Test 1">Test 1</a>
</li>
<li>
<a href="gaga.html" class="sublevel-down" title="Test 2">Test 2</a>
</li>
</ul>
</li>
<li>
<a href="gaga.html" class="mainlevel-down" title="Test Level 1">Test Level 1</a>
</li>
</ul>


</div> 

Nach

title="Accueil">Accueil</a> 

kommt ein neues <ul>, und zwar ohne ID-Angabe... hängt es vielleicht damit zusammen?

Ich weiß nur nicht wie ich es wegbekomme, das Menü wird per joomla generiert...

[maggus]

Ich habe jetzt sogar mein Menü durch eine 1:1 Kopie vom Tutorial ersetzt:

http://www.htmldog.com/articles/suck...le/bones2.html

Auch den CSS Inhalt. Es passiert das gleiche... Schon komisch. Also ich bin mit meiner kleinen Weisheit leider am Ende. Jetzt kann ich nur noch auf euch Profis hoffen