CSS többszintű menü alányílik
Az a problémám, hogy a legördülő menü alányílik egy alatta lévő Sildernek, ami JS-el megy.
Itt az oldal:
link
Silder JS:Menü css:
Valakinek valami megoldás?
■ Itt az oldal:
link
Silder JS:
<script src="jquery-latest.js" type="text/javascript"></script>
<script src="jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#slider2').bxSlider({
mode: 'fade',
auto: true,
controls: false,
autocontrols: false,
pause: 4000,
});
});
</script>
.menu {
height:35px;
position:relative;
margin:0px -40px -17px 0;
padding:0 0 0 0px;
/*border:#00FF33 1px solid;*/
}
.menu ul {
height:19px;
padding:0;
margin:0;
list-style:none;
width:125px;
float:left;
}
.menu ul ul {
position:absolute;
z-index:-1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul ul ul {position:absolute; left:125px; top:0;}
.menu ul ul ul.rgt {position:absolute; left:auto; right:125px; top:0;}
.menu ul li {
float:left;
/*margin:10px 0 0 5px; */
/*border-left:#CCCCCC 1px solid;*/
padding-top:8px;
margin:0 auto;
height:35px;
width:125px;
position:relative;
z-index:10;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
}
.menu ul ul li {
padding-top:8px;
margin:0 auto;
height:35px;
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menu ul ul ul li {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul li a {
display:block;
width:125px;
height:19px;
text-decoration:none;
margin:0px 0px 0px -10px;
text-align:center;
padding:10px 0px 10px 0px;
/*border:#00FFFF 1px solid;*/
background-image:url(images/menu_teglalap_2.jpg);
background-repeat:no-repeat;
font:normal 14px arial, sans-serif;
color:#f2eced;
font-style:normal;
font-weight:normal;
/*-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;*/
}
.menu ul li a.fly {
/*background:#ddd url(cssplay42/arrow.gif) no-repeat right center;*/
/*background-color:#ddd;*/
/*background:url(images/lenyil.png) no-repeat right center;*/
}
.menu ul li:hover > a {
/*background-color:#999; */
color:#fcc74e;
}
.menu ul li:hover > a.fly {
/*background:#999 url(cssplay42/arrow-over.gif) no-repeat right center;*/
/*background-color:#ddd;*/
/*background:url(images/jobbnyil.png) no-repeat right center;*/
}
.menu ul li a.fly {
/*background:url(images/jobbnyil.png) no-repeat right center;*/
}
.menu ul ul li {margin-top:-45px;}
.menu ul ul li.p1 {margin-top:0;}
.menu ul ul ul {margin-left:-125px;}
.menu ul ul ul.rgt {margin-left:0; margin-right:-125px;}
.menu ul li:hover > ul > li {
margin-top:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menu ul ul li:hover > ul {
margin-left:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menu ul ul li:hover > ul.rgt {
margin-left:auto;
margin-right:2px;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menu ul li.close {
margin-top:-50px;
z-index:-1;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
float: left;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
float: left;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
float: left;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
float: left;
}
Színezés
Kész a színezés is
z-index
Próbáltam
style="z-index:1; " -et
Száz
persze
A silderben 1, -1- et is próbáltam semmi eredménye, csak a menüt kutyultam össze
A #slider definíciójából
Megvan
Köszönöm a segítséget.
z-index
Azért nem ekkora mágia ez a
Abszolút
z-index mindenképp kell, csak