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:
  1. <script src="jquery-latest.js" type="text/javascript"></script>  
  2. <script src="jquery.bxSlider.min.js" type="text/javascript"></script>  
  3. <script type="text/javascript">  
  4.   $(function(){  
  5.     $('#slider2').bxSlider({  
  6.     mode: 'fade',  
  7.     auto: true,  
  8.     controls: false,  
  9.     autocontrols: false,  
  10.     pause: 4000,  
  11.   
  12. });  
  13. });          
  14.   
  15. </script>  
Menü css:
  1. .menu {  
  2. height:35px;   
  3. position:relative;  
  4. margin:0px -40px -17px 0;  
  5. padding:0 0 0 0px;  
  6.   
  7. /*border:#00FF33 1px solid;*/  
  8. }  
  9.   
  10. .menu ul {  
  11. height:19px;   
  12. padding:0;   
  13. margin:0;   
  14.    
  15. list-style:none;   
  16. width:125px;   
  17. float:left;  
  18.   
  19. }  
  20.   
  21. .menu ul ul {  
  22. position:absolute;   
  23. z-index:-1;  
  24.   
  25. -webkit-transition: 0.5s;  
  26.   
  27. -moz-transition: 0.5s;  
  28.   
  29. -ms-transition: 0.5s;  
  30.   
  31. -o-transition: 0.5s;  
  32.   
  33. transition: 0.5s;  
  34.   
  35. transition-delay: 0.5s;  
  36.   
  37. -o-transition-delay: 0.5s;  
  38.   
  39. -moz-transition-delay: 0.5s;  
  40.   
  41. -ms-transition-delay: 0.5s;  
  42.   
  43. -webkit-transition-delay: 0.5s;  
  44.   
  45. }  
  46.   
  47. .menu ul ul ul {position:absolute; left:125px; top:0;}  
  48.   
  49. .menu ul ul ul.rgt {position:absolute; left:auto; right:125px; top:0;}  
  50.   
  51.   
  52.   
  53. .menu ul li {  
  54. float:left;  
  55. /*margin:10px 0 0 5px; */  
  56.   
  57. /*border-left:#CCCCCC 1px solid;*/  
  58. padding-top:8px;  
  59.   
  60. margin:0 auto;  
  61.    
  62. height:35px;  
  63.    
  64. width:125px;   
  65. position:relative;   
  66. z-index:10;   
  67.   
  68. -webkit-transition: 0.25s;  
  69.   
  70. -moz-transition: 0.25s;  
  71.   
  72. -ms-transition: 0.25s;  
  73.   
  74. -o-transition: 0.25s;  
  75.   
  76. }  
  77.   
  78.   
  79. .menu ul ul li {  
  80.   
  81. padding-top:8px;  
  82. margin:0 auto;   
  83. height:35px;  
  84.   
  85. transition-delay: 1s;  
  86.   
  87. -o-transition-delay: 1s;  
  88.   
  89. -moz-transition-delay: 1s;  
  90.   
  91. -ms-transition-delay: 1s;  
  92.   
  93. -webkit-transition-delay: 1s;  
  94.   
  95. }  
  96.   
  97. .menu ul ul ul li {  
  98.   
  99.   
  100. transition-delay: 0.5s;  
  101.   
  102. -o-transition-delay: 0.5s;  
  103.   
  104. -moz-transition-delay: 0.5s;  
  105.   
  106. -ms-transition-delay: 0.5s;  
  107.   
  108. -webkit-transition-delay: 0.5s;  
  109.   
  110. }  
  111.   
  112.   
  113.   
  114. .menu ul li a {  
  115. display:block;   
  116. width:125px;   
  117. height:19px;   
  118.   
  119. text-decoration:none;   
  120. margin:0px 0px 0px -10px;  
  121. text-align:center;  
  122. padding:10px 0px 10px 0px;  
  123.   
  124.   
  125. /*border:#00FFFF 1px solid;*/  
  126.   
  127.   
  128. background-image:url(images/menu_teglalap_2.jpg);  
  129. background-repeat:no-repeat;   
  130.   
  131. font:normal 14px arial, sans-serif;   
  132. color:#f2eced;  
  133. font-style:normal;  
  134. font-weight:normal;  
  135.    
  136.   
  137. /*-o-border-radius: 10px; 
  138.  
  139. -moz-border-radius: 10px; 
  140.  
  141. -ms-border-radius: 10px; 
  142.  
  143. -webkit-border-radius: 10px; 
  144.  
  145. border-radius: 10px;*/  
  146.   
  147. }  
  148.   
  149. .menu ul li a.fly {  
  150. /*background:#ddd url(cssplay42/arrow.gif) no-repeat right center;*/  
  151. /*background-color:#ddd;*/  
  152.   
  153.   
  154. /*background:url(images/lenyil.png) no-repeat right center;*/  
  155.   
  156. }  
  157.   
  158. .menu ul li:hover > a {  
  159. /*background-color:#999; */  
  160.   
  161. color:#fcc74e;  
  162. }  
  163.   
  164. .menu ul li:hover > a.fly {  
  165. /*background:#999 url(cssplay42/arrow-over.gif) no-repeat right center;*/  
  166. /*background-color:#ddd;*/  
  167.   
  168. /*background:url(images/jobbnyil.png) no-repeat right center;*/  
  169. }  
  170.   
  171. .menu ul li a.fly {  
  172. /*background:url(images/jobbnyil.png) no-repeat right center;*/  
  173.    
  174. }  
  175.   
  176.   
  177. .menu ul ul li {margin-top:-45px;}  
  178.   
  179. .menu ul ul li.p1 {margin-top:0;}  
  180.   
  181. .menu ul ul ul {margin-left:-125px;}  
  182.   
  183. .menu ul ul ul.rgt {margin-left:0; margin-right:-125px;}  
  184.   
  185.   
  186.   
  187. .menu ul li:hover > ul > li {  
  188. margin-top:0;  
  189.   
  190. transition-delay: 0.5s;  
  191.   
  192. -o-transition-delay: 0.5s;  
  193.   
  194. -moz-transition-delay: 0.5s;  
  195.   
  196. -ms-transition-delay: 0.5s;  
  197.   
  198. -webkit-transition-delay: 0.5s;  
  199.   
  200. }  
  201.   
  202. .menu ul ul li:hover > ul {  
  203. margin-left:0;  
  204.   
  205. transition-delay: 0s;  
  206.   
  207. -o-transition-delay: 0s;  
  208.   
  209. -moz-transition-delay: 0s;  
  210.   
  211. -ms-transition-delay: 0s;  
  212.   
  213. -webkit-transition-delay: 0s;  
  214.   
  215. }  
  216.   
  217. .menu ul ul li:hover > ul.rgt {  
  218. margin-left:auto;   
  219. margin-right:2px;  
  220.   
  221. transition-delay: 0s;  
  222.   
  223. -o-transition-delay: 0s;  
  224.   
  225. -moz-transition-delay: 0s;  
  226.   
  227. -ms-transition-delay: 0s;  
  228.   
  229. -webkit-transition-delay: 0s;  
  230.   
  231. }  
  232.   
  233. .menu ul li.close {  
  234. margin-top:-50px;  
  235. z-index:-1;}  
  236.   
  237. /* keep the third level hidden when you hover on first level list OR link */  
  238.   
  239. .menu ul :hover ul ul{  
  240.   
  241. visibility:hidden;  
  242.  float: left;  
  243. }  
  244.   
  245. /* keep the fourth level hidden when you hover on second level list OR link */  
  246.   
  247. .menu ul :hover ul :hover ul ul{  
  248.   
  249. visibility:hidden;  
  250.  float: left;  
  251. }  
  252.   
  253. /* make the third level visible when you hover over second level list OR link */  
  254.   
  255. .menu ul :hover ul :hover ul{   
  256.   
  257. visibility:visible;  
  258.  float: left;  
  259. }  
  260.   
  261. /* make the fourth level visible when you hover over third level list OR link */  
  262.   
  263. .menu ul :hover ul :hover ul :hover ul {   
  264.   
  265. visibility:visible;  
  266.  float: left;  
  267. }  
Valakinek valami megoldás?
‹ ajax history CSS3 könyv ›
 ■
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.