CSS Dropdown-Menü geht über den Seitenrand

W

WebMarco

Mitglied
Hallo liebe Foren-Gemeinde,

ich habe ein Dropdown-Menü mittels CSS umgesetzt. Dies funktioniert soweit auch sehr zufriedenstellend. Einziges Problem: hat ein äußerst rechts stehender Menüpunkt weitere Submenüpunkte, so fährt das entsprechende Dropdown-Menü rechts über die Seitenbegrenzung hinaus.

Aktuell sieht das ganze so aus:
link-1.png

Doch aussehen sollte es so:
link-2.png

Gibt es eine Möglichkeit, dies zu verhindern? Schön wäre natürlich, dass das Dropdown-Menü am Seitenrand hängen bleibt und sich dann nach links verschiebt. Was natürlich nicht hilft, ist es das Submenü nach links zu öffnen. Dann hätte ich das gleiche Problem auf der links Seite. Jetzt habe ich viele, viele Stunden an diesem Problem gebastelt, Google quasi leer gesucht :D, doch nicht ansatzweise eine Idee. Ich habe auch schon mit den Positionierungen (absolute und relative; das absolute richtet sich nach dem direkt übergeordneten relative) rumprobiert,... ohne Erfolg.

CSS:
HTML: 
#menuebar { width:100%; }
#menuebar .div { margin:0px auto; width:1110px; height:50px; background:#0093dd; border-top:1px #1f1a17 solid; border-bottom:1px #1f1a17 solid; text-align:left; }

#nav { display:inline-block; width:auto; margin:0px auto auto 10px; padding:0; font-size:14px; }
#nav img { margin-top:3px; margin-bottom:-3px; }
#nav li { margin:5px; float:left; position:relative; list-style:none; }
#nav a { font-weight:normal; color:#ffffff; text-decoration:none; display:block; padding:5px; }

#nav .current a, #nav li:hover > a { background:#64b3da; color:#ffffff; }
#nav .current a, #nav li:hover > a span { display:block; }

/* Drop-Down */
#nav li:hover > ul { visibility:visible; }
#nav ul { visibility:hidden; min-width:250px; position:absolute; background:#64b3da; margin-top:0; }
#nav ul li { float:none; margin:2px -8px 2px -8px; padding:0px 10px 0px 10px; white-space:nowrap; text-align:left; }
#nav ul a { font-weight:normal; }
#nav ul a:hover { background:#0093dd; }

HTML:
HTML: 
<ul id="nav">
  <li><a href="#">Link</a>
  // Submenü ausgeben
  <ul>
    <li><a href="#">Sub-Link</a></li>'."\n";
    <li><a href="#">Sub-Link</a></li>'."\n";
    <li><a href="#">Sub-Link</a></li>'."\n";
    <li><a href="#">Sub-Link</a></li>'."\n";
  </ul>
  </li>
  <li><a href="#">Link</a>
  <li><a href="#">Link</a>
  <li><a href="#">Link</a>
</ul>

Natürlich handelt es sich um ein dynamisches Menü, dass aus einer Datenbankabfrage (Schleife) aufgebaut wird. Daher ist eine statische Lösung nicht möglich.

Hat jemand eine Idee? Geht es ohne JavaScript?

Vielen Dank für Eure Unterstützung.
 
Hi,

ich habe das jetzt mal nachgebaut. Habe ein paar anpassungen gemacht im css,

ich denke das ist das was du haben willst

HTML: 
#menuebar { width:100%; }
#menuebar .div { margin:0px auto; width:1110px; height:50px; background:#0093dd; border-top:1px #1f1a17 solid; border-bottom:1px #1f1a17 solid; text-align:right; }

#nav { display:inline-block; width:auto; margin:0px auto auto 10px; padding:0; font-size:14px; }
#nav img { margin-top:3px; margin-bottom:-3px; }
#nav li { margin:5px; float:right; position:relative; list-style:none; }
#nav a { font-weight:normal; color:#ffffff; text-decoration:none; display:block; padding:5px; }

#nav .current a, #nav li:hover > a { background:#64b3da; color:#ffffff; }
#nav .current a, #nav li:hover > a span { display:block; }

/* Drop-Down */
#nav li:hover > ul { visibility:visible; }
#nav ul { visibility:hidden; min-width:250px; background:#64b3da; margin-top:0; }
#nav ul li { float:none; margin:2px -8px 2px -8px; padding:0px 10px 0px 10px; white-space:nowrap; text-align:left; }
#nav ul a { font-weight:normal; }
#nav ul a:hover { background:#0093dd; }
 
Hallo Xervos,

vielen Dank für Deinen Lösungsvorschlag. Leider funktioniert dieser jedoch nicht so ganz. Das Dropdown wird zwar nach rechts geöffnet, jedoch ist nun der Hauptmenüpunkt genauso breit, wie das Dropdownmenü. Außerdem ist nun alles rechtsbündig, wodurch sich auch die Reihenfolge aller Menüpunkte wechselt.
 
Nun, es scheint wohl keinen "automatisierten" Weg mittels CSS zu geben. Nach nun längerer Recherche habe ich mich dazu entschlossen, die einzelnen Listenpunkte in der php-Schleife durchzählen zu lassen und gebe mir damit in der class="element_$nummer" jeweils eine Zuordnung an, die ich dann per Hand in der CSS reguliere. Also je nach Layout dann das Dropdown nach links oder rechts öffnen lasse, oder einfach entsprechend verschiebe.
 
Geht doch.
Code: 
<doctype html>
<html>
<head>
<style type="text/css">
#menuebar { width:100%; }
#menuebar .div { margin:0px auto; width:1110px; height:50px; background:#0093dd; border-top:1px #1f1a17 solid; border-bottom:1px #1f1a17 solid; text-align:left; }

#nav { background:#333;display:inline-block; width:auto; margin:0px auto auto 10px; padding:0; font-size:14px; }
#nav img { margin-top:3px; margin-bottom:-3px; }
#nav li { margin:5px; float:left; position:relative; list-style:none; }
#nav a { font-weight:normal; color:#ffffff; text-decoration:none; display:block; padding:5px; }

#nav .current a, #nav li:hover > a { background:#64b3da; color:#ffffff; }
#nav .current a, #nav li:hover > a span { display:block; }

/* Drop-Down */
#nav li:hover > ul { display:block; }
#nav ul { display:none;  position:absolute; background:#64b3da; margin-top:0; }
#nav ul li { float:none; margin:2px -8px 2px -8px; padding:0px 10px 0px 10px; white-space:nowrap; text-align:left; }
#nav ul a { font-weight:normal; }
#nav ul a:hover { background:#0093dd; }


                #nav li:nth-child(4) ul , #nav li:nth-child(3) ul {
                   right:0;
                }


</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">Link</a>
 
  <ul>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
  </ul>
  </li>
  <li><a href="#">Link</a>
 <ul>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
  </ul>
</li>
  <li><a href="#">Link</a>
<ul>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
  </ul>
</li>
  <li><a href="#">Link</a>
<ul>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
    <li><a href="#">Sub-Link</a></li>
  </ul>
</li>
</ul>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück