Delphi-PRAXiS - [CSS] Dropdown Menü wird abgeschnitten

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)

- Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)

- - [CSS] Dropdown Menü wird abgeschnitten (https://www.delphipraxis.net/106360-%5Bcss%5D-dropdown-menue-wird-abgeschnitten.html)

[CSS] Dropdown Menü wird abgeschnitten

Hallo!

Ich habe folgenden Code:

Code:

			<head>

  <style ...>

    #contentbox { width:100%; background-color:#FFF; margin-bottom:10px; clear:both; }

    #navi, #navi ul { list-style-type:none; margin:0; padding:0; }

    #navcontainer { height:24px; position:relative; }   

    #navi { position:absolute; }

    #navi > li { width:128px; float:left; }

    #navi > li { height:24px; overflow:hidden; }

    #navi > li:hover { height:auto; overflow:visible; }

    #navi a { font-weight:bold; text-align:center; display:block; height:20px; width:128px; padding:2px; }

    #navi a:link, #navi a:visited { color:#FFF; background:#a8cff0; text-decoration:underline; }

    #navi a:active, #navi a:hover { color:#000; background:#ecf3f9; text-decoration:none; }

  </style>

</head>

<body>

  <div id="contentbox">

    <div id="navcontainer">

       <ul id="navi">[*][url="#"]Link 1[/url][*][url="#"]Link 2[/url]

           <ul>[*][url="#"]Angebot[/url][*][url="#"]Geschichte[/url]

   [*][url="#"]Jobs[/url][/list]         [*][url="#"]Projekte[/url]

           <ul>[*][url="#"]Alpha[/url][*][url="#"]Beta[/url]

   [*][url="#"]Gamma[/url][/list]         [*][url="#"]Impressum[/url][/list]    </div>

  </div>

</body>

Das funktioniert auch wunderbar.

Einziges Problem: Sobald ich den Container "contentbox" einbaue, wird das Dropdown-Menü am Ende des Containers "contentbox" abgeschnitten? Hat vielleicht hier eine Idee, wie ich das lösen könnte? "Overflow" habe ich schon in allen möglichen Versionen und Positionen durchgetestet, das brachte leider keinen Erfolg... :(

Danke im voraus,
MCXSC

Re: [CSS] Dropdown Menü wird abgeschnitten

Hallo,

ohne das nun genauer zu untersuchen: Du könntest versuchen, den

z-index zu setzen. Beispielsweise so (10, da man normalerweise keine 10 Verschachtelungstiefen hat und somit sichergestellt wird, dass der Container den höchsten z-index hat):

Code:

			position: absolute;

z-index: 10;

Grüße

Re: [CSS] Dropdown Menü wird abgeschnitten

Hallo MCXSC,

ich habe es gerade im aktuellsten Firefox ausprobiert
und ich entdecke nichts, was abgeschnitten ist.

Alle Menüs werden vollständig angezeigt und
bei zu geringer Breite von "contentbox" in die
nächste umbrochen.

Oder was genau meinst du und mit welchem Browser
tritt das Problem auf?

P.S. Willst du alle Explorer 6 User außen vor lassen?
Der ignoriert ja alle halbwegs modernen CSS Regeln
die du verwendest.

Gruß
Pfoto