Z-Index Problem

M

MsWord

Mitglied
Hallo,

bei meiner Seite habe ich ein kleines Problem mit dem Z-Index.
Ich benutze ein CSS-Pulldown Menü und ein jQuery Scrollbar Script.

Hier könnt ihr euch das Problem betrachten: http://www.cookienetwork.de/

Bei Mozilla Firefox funktioniert es richtig nur bei Chrome spinnt das.

Hat jemand eine Idee wie man das beheben kann?


CSS von dem Menü:
Code: 
/* ++++++++++++++++++++ Navigation ++++++++++++++++++++ */

#nav {
	width:					100%;
	margin:					0;
	float:					right;
	height:					64px;
	font-size:				12px;
	z-index:				999999;
}

ul#navigation {
	margin:					0px auto;
	float:					right;
	width:					100%;
	font-size:				12px;
}

ul#navigation li {
	display:				inline;
	font-size:				12px;
	font-weight:			bold;
	margin:					0;
	padding:				0;
	float:					right;
	position:				relative;
}

ul#navigation li a {
	padding:				25px 25px;
	font-size:				12px;
	color:					#dedede;
	text-decoration:		none;
	display:				inline-block;
	background-color:		transparent;
	-webkit-transition:		color 0.2s linear, background 0.3s linear;	
	-moz-transition:		color 0.2s linear, background 0.3s linear;	
	-o-transition:			color 0.2s linear, background 0.3s linear;	
	transition:				color 0.2s linear, background 0.3s linear;	
}

ul#navigation li a:hover {
	background:				#549500;
	color:					#fff;
	font-size:				12px;
}

ul#navigation li:hover > a {
	background:				#549500;
	color:					#fff;
	font-size:				12px;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
	visibility:				visible;
	opacity:				1;
    z-index: 				999999999;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: 			none;
    margin: 				0;
    padding: 				0;    
	visibility:				hidden;
    position: 				absolute;
    z-index: 				99999999;
	width:					180px;
	background-color:		rgba(0, 0, 0, 0.7);
	/*box-shadow:				1px 1px 3px #ccc;*/
	opacity:				0;
	-webkit-transition:		opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:		opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:			opacity 0.2s linear, visibility 0.2s linear; 
	transition:				opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 					64px;
    left: 					0px;
    z-index: 				99999999;
}

ul#navigation ul li ul {
    top: 					0;
    left: 					181px;
    z-index: 				99999999;
}

ul#navigation ul li {
	clear:					both;
	width:					100%;
	border:					0 none;
	border-bottom:			1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:				none;
	padding:				7px 15px;
	color:					#dedede;
	text-decoration:		none;
	display:				inline-block;
	border:					0 none;
	float:					left;
	clear:					both;
	width:					150px;
}

ul#navigation li a.first {
	border-left: 			0 none;
}

ul#navigation li a.last {
	border-right:			0 none;
}

ul#navigation ul li.lastet{
	border: 				0;
}

CSS vom Container:
Code: 
div.body-container{
	left:					0;
	top:					64px;
	width:					100%;
	height:					600px;
	margin:					0 0 0 0;
	padding:				0;
	position:				fixed;
	overflow:				hidden;
	z-index:				1;
}

CSS von der jQuery Scrollbar:
Code: 
.ps-container .ps-scrollbar-x-rail {
    position: absolute; /* please don't change 'position' */
    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color.2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
}

.ps-container:hover .ps-scrollbar-x-rail,
.ps-container.hover .ps-scrollbar-x-rail {
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.ps-container .ps-scrollbar-x-rail:hover,
.ps-container .ps-scrollbar-x-rail.hover {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

.ps-container .ps-scrollbar-x-rail.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

.ps-container .ps-scrollbar-y-rail {
    position: absolute; /* please don't change 'position' */
    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
    width: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -o-transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color.2s linear, opacity .2s linear;
    -moz-transition: background-color .2s linear, opacity .2s linear;
    transition: background-color .2s linear, opacity .2s linear;
}

.ps-container:hover .ps-scrollbar-y-rail,
.ps-container.hover .ps-scrollbar-y-rail {
    opacity: 0.6;
    filter: alpha(opacity = 60);
}

.ps-container .ps-scrollbar-y-rail:hover,
.ps-container .ps-scrollbar-y-rail.hover {
    background-color: #eee;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

.ps-container .ps-scrollbar-y-rail.in-scrolling {
    opacity: 0.9;
    filter: alpha(opacity = 90);
}

.ps-container .ps-scrollbar-x {
    position: absolute; /* please don't change 'position' */
    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
    height: 8px;
    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.ps-container.ie6 .ps-scrollbar-x {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
}

.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
    background-color: #999;
}

.ps-container .ps-scrollbar-y {
    position: absolute; /* please don't change 'position' */
    right: 0; /* there must be 'right' for ps-scrollbar-y */
    width: 8px;
    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -o-transition: background-color .2s linear;
    -webkit-transition: background-color.2s linear;
    -moz-transition: background-color .2s linear;
    transition: background-color .2s linear;
}

.ps-container.ie .ps-scrollbar-y {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
}

.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
    background-color: #999;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück