DropDown-Menü verschwindet hinter dem Content

[Geri345]

Hallo

Hab ein Problem mit einem neuen drop-down menü.
hab mich durch mehrer scripts gewurstelt (darunter auch die hochgelobten suckerfish und son of suckerfish scripts) und bringe keines "über" den content.

auch der häufig erwähnte tipp mit absolut+z-index scheint bei mir nicht zu funzen.
bitte um hilfe

nav:

<div id="nav1"><a href="index.php?section=home" <?php if ($_GET['section'] == "home") { echo 'class="aktiv" style="color:#EA1D25;"'; } ?>><b>HOME</b></a></div>



<div id="nav12">




<ul class="dropdown">


<li><a href="" ><b>ANGEBOT</b></a>
	<ul class="submenu">            <li><a href="">Test 1</a></li>
    <li><a href="">Test 2</a></li>

    </ul>      </li></ul></div>

betreffende css-zeilen:

ul									{ list-style: none; }

/* 	LEVEL ONE*/ul.dropdown                         { position: absolute;z-index:99;top:-16px; left:-35px; width:120px; }ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }ul.dropdown a:hover		            { color: #000; }ul.dropdown a:active                { color: #ffa500; }ul.dropdown li a                    { display: block; color: #222; }ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */ul.dropdown li.hover,ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }ul.dropdown li.hover a              { color: black; }

/* 	LEVEL TWO*/ul.dropdown ul 						{ width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index:100;}ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 									  border-bottom: 1px solid #ccc; float: none; }									                                      /* IE 6 & 7 Needs Inline Block */ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 
/* 	LEVEL THREE*/ul.dropdown ul ul 					{ left: 100%; top: 0; }ul.dropdown li:hover > ul 			{ visibility: visible; }

css-zeilen der umliegenden divs aus der zentralen css-datei

#navi{position:absolute;z-index:55;height:25px;width:1025px;background-color:#ffffff;left:0px;top:425px;}

#content{position:absolute;z-index:2;height:675px;width:1025px;
background-image:url('../img/maus_bg.png');background-repeat:no-repeat;top:450px;overflow:auto;
}

#inner_content{position:absolute;z-index:3;width:970px;height:590px;left:30px;top:30px;text-align:justify;font-family:Arial, Helvetica, sans-serif;
}

#nav1{position:absolute;height:25px;width:100px;background-color:#d9dadc;font-family:Arial, Helvetica, sans-serif;line-height:25px;text-align:center;}

#nav12{position:absolute;z-index:66;height:25px;width:90px;left:120px;font-family:Arial, Helvetica, sans-serif;background-color:#ffffff;line-height:25px;text-align:center;}

beim dropdown-script handelt es sich um den simplejQueryDropDown

Simple jQuery Dropdowns

bitte um rat
lg Geri

 

[Cheffchen]

Hallo,

du meinst jetzt im ernst das wir was mit dem chaos schnippsel code was anfangen können?

Zeige ein Link!

Cheffchen


PS: was ich gerade sehen macht der untere block den anschein das da mehr am argen liegt das jede classe position:absolute und z-index.

 

[Geri345]

ist das schlimm? oO
hab eig immer alle divs auf absolut, zwecks positionierung. hatte nie probleme damit

und warum chaos-schnipsel? das sind genau die 3 code-blöcke, die hier zusammenspielen

 

[dagunn]

Das ist aber leider sehr unordentlich und macht nicht grade spaß beim lesen....


EDIT: zeig uns mal ein link bitte, wie cheffen schon geschrieben hat...

 

[Geri345]

hier der link, unter dem Punkt: Angebot

[link entfernt da problem gelöst]

 

[threadi]

Und hier ist ein Link zu den HTML-Fehlern in deiner Seite:
[Invalid] Markup Validation of http://www.bigfoot-design.at/bigfoot-design_neu/ - W3C Markup Validator
-> korrigieren

Außerdem sollte man auf absolute Positionierung wo es nur geht verzichten. Diese verursachen eher Probleme (wie bei dir jetzt) als das sie eine Lösung sind, vor allem wenn man sie unbedacht verwendet. In deinem Fall sind die vielen absolut positionierten Elemente selbst mit z-index für den Browser nicht wirklich darstellbar, weshalb des das Problem gibt.

 

[Geri345]

also lieber ein wechsel auf "relative"?

edit: die fehler laut w3c-validator hab ich behoben.

 

[Geri345]

ok nach ein bisschen googlen, habe ich wohl wirklich das "absolute" überbenutzt :(

wie kann ich das jetzt ausbessern? ich bin schon mit den positionen am rumschrauben, kriege aber nichts brauchbares heraus

 

[Cheffchen]

Hallo,

ne weglassen wo es nicht gebraucht wird. Auf die schnelle würde ich sagen brauchst position vielleicht 3 mal auf der Seite und z-index ca genau so oft.

#content z-index löschen dann ist menü richtig.

Weg lassen, am einfachsten von aussen nach innen die Position sachen anachauen und löschen.

zb.
#wrapper ist gelinde gesagt thema verfehlt setzen :O)
das dürfte es eher sein:

#wrapper{
    width: 1025px;
    margin: 0 auto;
}

fällt was auf der css code ist bloss noch halb so viel und das zieht sich durch dein ganzen css code.
#banner müsste geändert werden in relativ aber nur wenn in #banner was positionieren musst. usw.

Im grunde musst jetzt jeden block durchgehen und schauen aber das dürfte ja als Webdesigner nicht das problem sein.

Cheffchen

 

[Geri345]

wow thx, auf das wäre ich nie gekommen, dass der z-index schuld ist.

ja werde alles noch mal durchgehen. dürfte echt kein problem sein.

großes danke nochmal

 

[threadi]

also lieber ein wechsel auf "relative"?

"static" wäre das optimale, ist auch Standard-Wert weshalb Du einfach "position" weglassen kannst. Einen Wert anders als static braucht man nur, wenn man irgendetwas übereinander legen will - wie z.B. dein Menü über den Content.