✔ durchdringende Menüs

[Sprint]

Hallo Kollegen,

bei meinem aktuellen Projekt verwende ich ein mit purecssmenu erstelltes Menü, das, trotz des grottigen Quelltextes, wunderbar funktioniert. Auf einer Seite wird aber Organic Tabs Menü verwendet, um mehrere Download Listen zu organisieren. Diese beiden Menüs kommen sich nun in die Quere, indem das Hauptmenü beim Aufklappen sich unter die Organic Tabs schiebt und adurch nicht mehr zu gebrauchen ist.

HIER ist die betroffene Seite. Wenn man dann das Info Menü aufklappt, ist der Effekt zu sehen. Was muß ich machen, damit das Hauptmenü ganz oben bleibt?

Hauptmenü

ul.cssMenu ul{display:none}
ul.cssMenu li:hover>ul{display:block}
ul.cssMenu ul{position: absolute;left:-1px;top:98%;}
ul.cssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.cssMenu,ul.cssMenu ul { margin:0; list-style:none; padding:0 5px 2px 0; background-color:#fff; background-repeat:repeat; border: solid 1px #808080; }
ul.cssMenu table {border-collapse:collapse}ul.cssMenu {	display:block; zoom:1; height:21px; float: left;}
ul.cssMenu ul{ width:120px; }
ul.cssMenu li{ display:block; margin:2px 0px 0px 2px; font-size:0px; }
ul.cssMenu a:active, ul.cssMenu a:focus { outline-style:none; }
ul.cssMenu a, ul.cssMenu li.dis a:hover, ul.cssMenu li.sep a:hover { display:block; vertical-align:middle; background-color:#ffffff; text-align:center; text-decoration:none; padding:2px 5px 5px 10px; _padding-left:0; color: #000; font: 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; text-decoration:none; z-index: 900; border: solid 1px #fff; cursor:default; }
ul.cssMenu span{ overflow:hidden; }
ul.cssMenu li { float:left; }
ul.cssMenu ul li { float:none; }
ul.cssMenu ul a { text-align:left; white-space:nowrap; }
ul.cssMenu li.sep{ text-align:left; padding:0px; line-height:0; height:100%; }
ul.cssMenu li.sep span{ float:none;	padding-right:0; width:3px; height:100%; display:inline; background-color:#808080;	background-image:none;}
ul.cssMenu ul li.sep span{ width:100%; height:3px; }
ul.cssMenu li:hover{ position:relative; }
ul.cssMenu li:hover>a{ background-color:#c7e3ff; border-color:#004080; border-style:solid; color: black; font: 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; text-decoration:none; }
ul.cssMenu li a:hover{ position:relative; background-color:#c7e3ff; border-color:#004080; border-style:solid; color: black; font: 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; text-decoration:none; }
ul.cssMenu li.dis a { color: #557D4F !important; }
ul.cssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px; height:16px; }
ul.cssMenu ul img {width:16px; height:16px; }
ul.cssMenu img.over{display:none}
ul.cssMenu li.dis a:hover img.over{display:none !important}
ul.cssMenu li.dis a:hover img.def {display:inline !important}
ul.cssMenu li:hover > a img.def  {display:none}
ul.cssMenu li:hover > a img.over {display:inline}
ul.cssMenu a:hover img.over,ul.cssMenu a:hover ul img.def,ul.cssMenu a:hover a:hover img.over{display:inline}
ul.cssMenu a:hover img.def,ul.cssMenu a:hover ul img.over,ul.cssMenu a:hover a:hover img.def{display:none}
ul.cssMenu a:hover ul{display:block}
ul.cssMenu span{ display:block; background-image:url(../bilder/arrv_white.gif); background-position:right center; background-repeat: no-repeat; padding-right:9px;}
ul.cssMenu ul span{background-image:url(../bilder/arr_black.gif)}
ul.cssMenu ul li:hover > a span{	background-image:url(../bilder/arr_white.gif);}
ul.cssMenu table a:hover span{background-image:url(../bilder/arr_white.gif)}
ul.cssMenu li.cssMenui0 { width:110px; height:23px; }
ul.cssMenu li a.cssMenui0{ height:100%; background-image:url(../bilder/btn3.jpg); border-width:0; color:#fff; font: 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; background-repeat: no-repeat; }
ul.cssMenu li a.cssMenui0:hover{ background-image:url(../bilder/btn4.jpg); color:#eee; font: 12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, sans-serif; background-repeat: no-repeat; }
ul.cssMenum0 { background-color:transparent; border-width:0px; padding:0px 0px 0px 0px; }
ul.cssMenum0>li>a { padding:8px 10px 0px 10px; }
ul.cssMenum0 a { padding:8px 10px 0px 10px; }
ul.cssMenum0 ul a { padding:2px 5px 5px 10px; }
ul.cssMenum0>li { margin:0px 0px 0px 0px; }
ul.cssMenum0 li { margin:0px 0px 0px 0px; }
ul.cssMenum0 li li { margin:2px 0px 0px 2px; }

Organic Tabs

ul.organ { position: relative; margin: 0; padding: 0; list-style: none; }
.organ img { position: relative; z-index: 2; margin-top: 10px; }
ul li.logo  { color: #666; height: auto; z-index: 2; display: block; padding: 14px 4px 4px; border-bottom-color: #666; border-bottom-width: 1px; }
ul li.organ a { color: #666; text-decoration: none; z-index: 2; display: block; padding: 4px; border-bottom-color: #666; border-bottom-width: 1px; }
ul li.organ a:hover { color: #bb0504; background: #dbe0e4; z-index: 2; }
ul li:last-child.organ a { z-index: 2; border: none; }

#organic-tabs { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; z-index: 2; padding: 10px; margin: 0 0 15px; /*-moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666;*/ }

#explore-nav { z-index: 2; overflow: hidden; margin: 0 0 10px 0; margin: 0; }
#explore-nav li { width: 97px; height: auto; z-index: 2; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { z-index: 2; margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #79949f; color: white; font-size: 10px; text-align: center; z-index: 2; border: 0; margin: 0; }
#explore-nav li a:hover { color: #b80a0b; background-color: #dbe0e4; z-index: 2; margin: 0; }

Viele Grüße,
Sprint

 

[Maik]

Moin,

richte für das DIV #menu mittels z-index eine höhere Schichtposition ein.

Beachte hierbei, dass diese Eigenschaft nur in Verbindung mit der position-Eigenschaft greift.

mfg Maik

 

[Sprint]

Moin,

richte für das DIV #menu mittels z-index eine höhere Schichtposition ein.

Beachte hierbei, dass diese Eigenschaft nur in Verbindung mit der position-Eigenschaft greift.

mfg Maik

Hi Maik,

die Idee mit dem z-index hatte ich auch schon, aber an anderer Stelle und immer ohne position.

Vielen Dank und einen guten Rutsch,
Sprint