BlackBoard | Druckvorschau: Kleines IE 8 Mouseover Problem

Geschrieben von daisuke am 11.10.2011 um 11:49:

Kleines IE 8 Mouseover Problem

Hallo,

In dem Problem geht es um folgende Webseite: http://ave-magazin.de/zwei/index.php
Ich arbeite da derzeit an einem Dropdown Menü und komme an einem Punkt nicht weiter. Per Mouseover öffne ich ein div, welches weitere Unterpunkte enthält (wenn man beispielsweise die Maus über den Menüpunkt "Produkte" bewegt). Wenn ich die Maus dann über das neu geöffnete div bewege, bleibt dieses in Firefox sichtbar. In IE 8 schliest sich dieses jedoch, sobald ich die Maus schnell darüberewege. Ich habe keine Ahnung woran dies liegt und alle meine Ideen (setTimeout beim Mouseover einbauen bspw.) waren erfolglos.
Irgendwelche Vorschläge?

Ach ja, hier der relevante Code:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:

 <div class="menupunkt"   onmouseover="document.getElementById('ccc').style.visibility = 'visible';" ><a href="#">
      <div style="height:100%; width:100%;">Produkte</div>
      </a>
      <div id="ccc" style="width:946px; height:250px; text-align:left; padding:5px; color:#292929; position:absolute; top:40px; left:-386px; background-color:#FFF; z-index:33; visibility:hidden;" onmouseover="this.style.visibility = 'visible';" onmouseout="this.style.visibility = 'hidden';" >
      <div style="width:30%; height:100%; position:relative; display:block; float:left;" class="spalte"><h1>Beleuchtung</h1>
      	   <a href="index.php?gruppe1=LED+Frontscheinwerfer+nach+StVZO">LED Frontscheinwerfer nach StVZO</a><br />
            </div>
      <div style="width:30%; height:100%; position:relative; display:block; float:left;" class="spalte"><h1>Antriebstechnik</h1>
          Pedale<br />
           Lagertechnik<br />
      </div>
      <div style="width:30%; height:100%; position:relative; display:block; float:right;" class="spalte">
      <h1>Zubehör</h1>
           Fahrradglocken und -hupen <br />
           Sekura-Fahrradschlösser<br />
</div>
      
      
      </div>
    </div>

Vielen Dank!!!

Geschrieben von LX am 11.10.2011 um 23:40:

Warum machst du das eigentlich mit JavaScript, und nicht via CSS? Da du ja die Menüpunkte und Untermenüs schon ordnungsgemäß verschachtelt hast, sollte das eigentlich relativ schmerzfrei funktionieren.

Beispiel:

code:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<div id="menu">
  <ul>
    <li class="menu_item">
      Punkt 1
      <div class="submenu">...</div>
    </li>
    <li class="menu_item">
      Punkt 2
      <div class="submenu">...</div>
    </li>
  </ul>
</div>

und passende Stylesheet-Definition:

code:
1: 2: 3: 4: 5: 6: 7: 8: 9:	.submenu { display: none; } .menu_item:hover .submenu { display: block; }