Witam!
Walczę dwie godziny z tym błahym problemem zamiast zająć się czymś konkretnym -już mam dość...... Może ktoś pomoże

Wstawiłem skitter-slider, działa elegancko, miałem z nim już do czynienia nie było więc problemów z konfiguracją. Powyżej mam Menu poziome i tu pojawia się problem.

Nie mogę ustawić z-index dla rozwijanego w jQuery submenu. Wszystko rozwija się prawidłowo (właściwie to pokazuje a nie rozwija), ponieważ użyłem tutaj fadeIn() ale jest przykryte bannerem skitter-slider. Banner (skitter) najwyższy z-index ma ustawiony w swoim pliku css 10000 dla ajax-loader, inne z-indexy ma w granicach 100 do 150.

Ustawiłem więc dla mojego rozwijanego submenu 999999 i nie pomaga. Ustawiałem takie wysokie z-index zamiennie również dla li a także na cały content zawierający w sobie ul. Nic nie pomaga. W firefoxie jak sprawdzam menu rozwinięte ma nadany prawidłowo z-index 99999 i wciąż jest pod spodem. Nawet przykrywa go ikonka przewijania w bok slidera, która ma z-index 100.

Gdzie szukać problemu?

dodam, że w poprzedniej aplikacji w której użyłem slidera-skitter umieściłem na nim logo strony i bez problemu pojawił się on nad sliderem mając z-index zaledwie 150

wrzucę trochę kodu:

html:

[PHP] pobierz, plaintext 
 
<div id="mainheader">
                                <div id="minihead"></div><!--end minihead-->
                                <div id="menutop">
 
                                    <ul class="shadowText menutop">
                                        <li class="lisubmenutop"><a href="#">Przykład1</a>
                                            <ul>
                                                <li><a href="#">sub1</a></li>
                                                <li><a href="#">sub2</a></li>
                                                <li><a href="#">sub3</a></li>
                                                <li><a href="#">sub4</a></li>
                                                <li><a href="#">sub5</a></li>
                                                <li><a href="#">sub6</a></li>
                                                <li><a href="#">sub7</a></li>
                                                <li><a href="#">sub8</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Przykład2</a></li>
                                        <li><a href="#">Przykład3</a></li>
                                        <li class="lisubmenutop"><a href="#">Przykład4</a>
                                            <ul>
                                                <li><a href="#">sub1</a></li>
                                                <li><a href="#">sub2</a></li>
                                                <li><a href="#">sub3</a></li>
                                                <li><a href="#">sub4</a></li>
                                                <li><a href="#">sub5</a></li>
                                                <li><a href="#">sub6</a></li>
                                                <li><a href="#">sub7</a></li>
                                                <li><a href="#">sub8</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">Przykład5</a></li>
                                        <li><a href="#">Przykład6</a></li>
                                    </ul>
 
                                </div><!--end menutop-->
                                <div id="banner" class="box_skitter box_skitter_large">
                                        <ul>
        									<li><img src="images/banner_skitter/banners/banner.jpg" alt="" /></li>
        									<li><img src="images/banner_skitter/banners/banner2.jpg" alt="" /></li>
        									<li><img src="images/banner_skitter/banners/banner3.jpg" alt="" /></li>
							         	</ul>
 
 
                                </div><!--end banner-->
                           </div><!--end mainheader-->
 
 
[PHP] pobierz, plaintext 

css:

[PHP] pobierz, plaintext 
 
/*MENUTOP*/
#menutop { width: 1200px; height: 40px; margin-bottom: 10px;}
#menutop ul.menutop { margin-left: 2px;}
#menutop ul.menutop > li { display: block; width: 195px; height: 40px; float: left; background: #2b5eb3; margin: 0 1px 0; border: 1px #CCC solid; }
#menutop ul.menutop > li:hover > a { color: #6890d3;}
#menutop ul.menutop > li > a { display: block; padding: 9px 0; font: 1.05em Tahoma, Geneva, sans-serif; color: #fff; text-align: center; }
/*MENU ROZWIJANE CSS*/
#menutop ul.menutop > li.lisubmenutop > ul { display: none;  background: #ffffff;}
#menutop ul.menutop > li.lisubmenutop > ul li { padding: 8px 35px;}
#menutop ul.menutop > li.lisubmenutop > ul li a { font-size: 0.9em; }
 
[PHP] pobierz, plaintext 

jquery:

[PHP] pobierz, plaintext 
 
$('#menutop ul.menutop > li.lisubmenutop').hover(function(){
        $(this).find('ul:first').stop().fadeIn(100);
 
    }, function(){
        $(this).find('ul:first').stop().fadeOut(50);
    });
 
[PHP] pobierz, plaintext 

ROZWIĄZANIE PROBLEMU:

menu należało wrzucić do diva w którym znajduje się banner skitter i ustawić z-index dopiero wtedy dla całego diva menu. Ponadto, żeby to działało listę UL należało przerobić na listę OL, ponieważ gryzły się UL ze zdjęciami dla bannera z UL menu. Na koniec ustawienie position: absolute dla diva menu na top ujemne, aby nie widniało na bannerze tylko ponad nim. Oczywiście div z bannerem pozycjonowane relatvnie


Pozdro

p.s. -jeszcze nie do końca hula pod IE ale to ju kosmetyka

Jednak nie działa mi w IE. Co dziwne nie działa mi w IE nawet zwykłe menu w CSS na zasadzie ul li:hover ul { display: block;} co może być powodem? Nie mam już pomysłów