Erledigt: Menü abgeschnitten im IE

 


Matze
Chefetage

28.04.08
15:53 Uhr
Ahoi.

Folgendes Problem: Ich habe eine Liste. In dieser Liste haben einige Listenelemente eine Unterliste mit einer festen Breite. Innerhalb dieser Unterliste gibt es wiederum teilweise Listenpunkte mit einer Unterunterliste. Sinn des ganzen ist eine Navigation mit mehreren Ebenen. Überfährt man einen Hauptpunkt wird das Menü dazu eingeblendet. In diesem Menü gibt es dann wieder einzelne Punkte mit einer dritten Menüebene. Genau hier gibt es das Problem, dass im IE die dritte Ebene dort abgeschnitten wird, wo die zweite Ebene in der Breite endet. Da mir jetzt sicher niemand folgen konnte, untermale ich das ganze mal mit zwei Screenshots.

So soll es aussehen:


So sieht es im IE aus:


Warum? Ich hab alles ausprobiert. Mit z-index rumgespielt, alle CSS-Angaben rausgenommen... Immer das gleiche Bild. Hier das Konstrukt:

  1. <ul>
  2. <li><a class="navi" href="http://supertopic/forum/" title="Kategorien">Forum</a>
  3. <ul id="sub2" class="drop">
  4. <li><a href="http://supertopic/forum/">Aktuelle Themen</a></li>
  5. <li><a href="http://supertopic/forum/1">News</a>
  6. <ul class="drop">
  7. <li><a href="">Bla</a></li>
  8. <li><a href="">Bla</a></li>
  9. <li><a href="">Bla</a></li>
  10. </ul>
  11. </li>
  12. </ul>
  13. </li>
  14. </ul>
Quelltext in Zwischenablage kopieren

Und der passende CSS-Code:

  1. #navigation .drop {
  2. position: absolute;
  3. margin: 20px 0 20px -2px;
  4. background: #fff;
  5. font-size: 12px;
  6. width: 211px;
  7. left: -999em;
  8. border-left: 1px solid #eee;
  9. border-right: 1px solid #eee;
  10. }
  11.  
  12. #navigation .drop li .drop {
  13. border-top: 1px solid #eee;
  14. }
Quelltext in Zwischenablage kopieren

Die Angabe left: -999em; ist hier zu vernachlässigen, da diese per JS beim Hover auf die korrekte Position geändert wird.

Hat irgendjemand eine Ahnung, was da los ist? heul

Vielen Dank schon mal!

Matze
Link zu diesem Beitrag in die Zwischenablage kopieren
Mister Ad
Werbung
Schon mal bei Saturn, DaWanda oder notebooksbilliger.de geguckt? Vielleicht wirst du dort fuendig.

 
Spek
Veteran

28.04.08
16:16 Uhr
Editiert: 28.04.08, 16:35 Uhr
Da Du das Ganze ja per Klasse .drop in der Breite angepasst hast, wird die erste Subnavi die Breite 211px haben und die andere Untersubnavi wird dadurch möglicherweise beschnitten. Meine ich. Kann das sein?

Nimm vielleicht mal die width-Angabe raus und guck mal was passiert.
Link zu diesem Beitrag in die Zwischenablage kopieren
Jonis
Veteran

28.04.08
16:23 Uhr
erste liste auf 422px verbreitern und zweite dann auf 211px begrenzen, allerdings musst du dann deine optischen angaben auch ändern

  1. #navigation .drop {
  2. position: absolute;
  3. margin: 20px 0 20px -2px;
  4. font-size: 12px;
  5. width: 422px;
  6. }
  7.  
  8. #navigation .drop li .drop {
  9. left: 211px;
  10. width: 211px;
  11. margin: 0;
  12. border-top: 1px solid #eee;
  13. }
  14.  
  15. #navigation .drop li {
  16. float: none;
  17. width: 211px;
  18. border-bottom: 1px solid #eee;
  19. background: #fff;
  20. }
  21.  
  22. #navigation .drop li:hover {
  23. background: #e5e5e5;
  24. }
  25.  
  26. #navigation .drop li a {
  27. display: block;
  28. color: #444;
  29. padding: 4px 4px 4px 10px;
  30. border-left: 1px solid #eee;
  31. border-right: 1px solid #eee;
  32. }
Quelltext in Zwischenablage kopieren

funktioniert dann auch im ie, allerdings haut er bei den unteren navipunkten noch vertikale abstände rein, hab auf die schnelle nicht gefunden wo das steht.
Link zu diesem Beitrag in die Zwischenablage kopieren
Matze
Chefetage

28.04.08
22:28 Uhr
Vielen Dank, Jonis. -)
Link zu diesem Beitrag in die Zwischenablage kopieren
 
#