css dropdown menü hervorheben

[wisler]

Hallo

Ich habe jetzt endlich ein drop-down menü geschafft und habe jetzt das problem das das menü immer im hintergrund von dre überschrift verschwindet.
Wisst ihr ein css-tag das das menü in den vordergrund versetzt?

Hier der link:
www.wwwieser.at/megaevent

Dankesehr!

[Joachim]

Hi,

www.wwwieser.at/megaevent

Ohje. Gibt es einen speziellen Grund, Deine Grafik zu zerschneiden und in absolut positionierten Schnipseln wieder zusammenzusetzen, die Du zudem noch in Divs verschachtelst?
Andernfalls solltes Du dieses Verfahren gründlich überdenken, es führt zu einer verkorksten Seitenstruktur und unnötig vielen Requests, was bekanntlich den Seitenaufbau verzögert.

Dein Überlagerungsproblem lässt sich mit z-index lösen.

Gruesse, Joachim

[wisler]

Hi,

www.wwwieser.at/megaevent
Ohje. Gibt es einen speziellen Grund, Deine Grafik zu zerschneiden und in absolut positionierten Schnipseln wieder zusammenzusetzen, die Du zudem noch in Divs verschachtelst?
Andernfalls solltes Du dieses Verfahren gründlich überdenken, es führt zu einer verkorksten Seitenstruktur und unnötig vielen Requests, was bekanntlich den Seitenaufbau verzögert.

Dein Überlagerungsproblem lässt sich mit z-index lösen.

Gruesse, Joachim

das mit dem Z-Index funktioniert nicht.
bleibt gleiches ergebniss!

MfG. wisler

[Joachim]

Hi,

das mit dem Z-Index funktioniert nicht.
bleibt gleiches ergebniss!

Quark. Gib Deinem Layer1 mal z-index: 1000...

Gruesse, Joachim

[wisler]

funtioniert noch immer nicht.
jetzt hab ich schon allen elementen des drop-down menüs z-index: 1000 gegeben.
Hier mein kompletter css-code:

body {
 background-image: url(bilder/orange_r11_c1.jpg);
 background-image: url(bilder/orange_r11_c1_gezerrt.jpg);
 background-repeat: repeat-y;
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 text-align: left;
}

body,td,th {
 color: #000000;
}
a.top:link {
 color: #808080;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
}
a:link {
 color: #C01412;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
}
a:visited {
 color: #C01412;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
}
a:hover {
 color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
}
a:active {
 color: #C01412;
  font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
}

#Layer1 {
 position:absolute;
 left:16px;
 top:162px;
 width:1024px;
 height:20px;
 z-index:40;
}
#Layer2 {
 position:absolute;
 left:8px;
 top:210px;
 width:150px;
 height:auto;
 z-index:41;
 color: #C01412;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
 text-align: justify;
 clip: rect(auto,auto,auto,auto);
 letter-spacing: normal;
 padding: 5px;
 margin: auto;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: dotted;
 border-bottom-style: none;
 border-left-style: none;
 border-top-color: #E04E12;
 border-right-color: #E04E12;
 border-bottom-color: #E04E12;
 border-left-color: #E04E12;
 visibility: visible;
}
#content {
 position:absolute;
 left:185px;
 top:210px;
 width:731px;
 height:auto;
 z-index:50;
 color: #C01412;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 text-decoration: none;
 text-align: justify;
 clip: rect(auto,auto,auto,auto);
 letter-spacing: normal;
 padding: 0px;
 margin: auto;
 visibility: visible;
 border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: none;
 border-right-style: none;
 border-bottom-style: none;
 border-left-style: none;
 border-top-color: #E04E12;
 border-right-color: #E04E12;
 border-bottom-color: #E04E12;
 border-left-color: #E04E12;
}

ul.menu, ul.menu ul {
    list-style-type: none;
     z-index:1000;
}

ul.menu a {
    display: block;
    padding: 3px 10px 3px 10px;
    font-weight:normal;
     z-index:1000;
}

ul.menu ul a {
    padding: 0 10px;
     z-index:1000;
}

ul.menu li {
    padding:0;
    margin:0;
    background-image: none;
    float:left;
    border:0px;
     z-index:1000;
}

ul.menu ul {
    margin-left:0;
    padding: 0 0 5px 0;
    position: absolute;
    background-color: #26383D;
    border:1px solid #FFF9E4;
    display:none;
    min-width:180px;
     z-index:1000;
}

/* IE-Hack für die Breite */
*html ul.menu ul {
    width:180px;
     z-index:1000;
}

/* Dies sind die Klassenstile für das Untermenü wenn sich die Maus */
/* über der Liste  befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul  {
    display:block;
     z-index:1000;
}

ul.menu ul li {
    float:none;
     z-index:1000;
}

[Joachim]

Hi,

du must fuer ie ggf auch die Elternelemente mit entsprechenden z-indexen versehen. Diese wirken natürlich nur, wenn Du auch ein position relative spendierst (sofern nicht eh schon absolut positioniert)

Gruesse, Joachim

[wisler]

Hi,

du must fuer ie ggf auch die Elternelemente mit entsprechenden z-indexen versehen. Diese wirken natürlich nur, wenn Du auch ein position relative spendierst (sofern nicht eh schon absolut positioniert)

Gruesse, Joachim

Aber es sind ja schon alle mit einem index versehen.
kannst du vl den css code ausbessern und mir wieder schicken, währe dir dankbar.

Dankend im vorraus
wisler