ugrás a tartalomhoz

CSS többszintű menü alányílik

cszlak · 2012. Júl. 31. (K), 07.54
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:

<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>
Menü css:

.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;
}
Valakinek valami megoldás?
 
1

Színezés

Hidvégi Gábor · 2012. Júl. 31. (K), 08.10
Első körben kérlek, használd a színezőt, ezen a hivatkozáson olvashatod el a lehetőségeket. Utána foglalkozunk a problémáddal.
2

Kész a színezés is

cszlak · 2012. Júl. 31. (K), 08.21
Kész a színezés is
3

z-index

Hidvégi Gábor · 2012. Júl. 31. (K), 08.31
Gondolom, játszottál a menü elemeinek z-indexeivel, ott milyen eredményt kaptál?
4

Próbáltam

cszlak · 2012. Júl. 31. (K), 08.40
Teljes káoszt a menüben, de még akkor is előtte maradt a Silder, pedig oda raktam
style="z-index:1; " -et
5

Száz

Hidvégi Gábor · 2012. Júl. 31. (K), 08.41
Próbáltál egynél nagyobb számot is?
6

persze

cszlak · 2012. Júl. 31. (K), 08.43
A menüben 10-ek vannak
A silderben 1, -1- et is próbáltam semmi eredménye, csak a menüt kutyultam össze
7

A #slider definíciójából

Hidvégi Gábor · 2012. Júl. 31. (K), 08.43
A #slider definíciójából töröltem a z-index: -1;-et, és FF alatt nálam így jónak tűnik.
8

Megvan

cszlak · 2012. Júl. 31. (K), 08.49
A JS fájlokban 99, 98-ra volt állítva a z-index, levettem őket és így jó lett.

Köszönöm a segítséget.
9

z-index

Hidvégi Gábor · 2012. Júl. 31. (K), 08.51
Ilyen problémáknál először a z-index-szel kell játszani, de néha ez sem hoz megoldást, ha az oldalon sok az abszolút pozícionált elem. Ekkor az elemeket HTML-ben kell egymás után pakolni addig, amíg jó nem lesz.
10

Azért nem ekkora mágia ez a

Ajnasz · 2012. Júl. 31. (K), 09.59
Azért nem ekkora mágia ez a z-index, kis odafigyeléssel logikusan be lehet állítani őket. :)
11

Abszolút

Pepita · 2012. Júl. 31. (K), 23.28
Pont abszolút pozicionált elemeknél van értelme z-indexelni. (Relatívnál asszem nemigen műxik.)
12

z-index mindenképp kell, csak

Hidvégi Gábor · 2012. Aug. 1. (Sze), 08.39
z-index mindenképp kell, csak néha a HTML-beli sorrend is számít. Egyébként relatív elemeknél is működik.