z-index su elenchi

[jerry6565]

Ciao a tutti sto cercando di fare un piccolo menu con una animazione sopra del tipo:

| Item |
| Item |
| Item |
| Item |
| Item |
| Item |
[####]


spostando il mouse sopra i vari elementi, il box inferiore [####] si spostera sopra (cioè teoricamente sotto) l'item con un effetto movimento in js. All'interno di [####] ce un altro div che crea un animazione orrizontale tipo luccichio!

[[#]###]
[#[#]##]
[##[#]#]
[###[#]]

il fatto è che non riesco a fare in modo che questo box stia sotto gli elementi della lista.

vi scrivo un po di codice

css

    div.main-menu-top { background: url(images/main-menu-top.png) top no-repeat; }
    div.main-menu-bottom { background: url(images/main-menu-bottom.png) bottom no-repeat; padding: 33px 0;}
    div.main-menu-content { background: url(images/main-menu-middle.png) top repeat-y; width: auto; height: auto;  padding: 150px 2px; }
    
    div.main-menu {
        position: absolute;
        top: -40px;
        right: 30px;
        bottom: -40px;
        width: 206px;
    }

    /*div.main-menu-content ul{ text-align:center; /*padding-top: .2em;*;    }*/
    /*div.main-menu-content ul {  width: 202px; margin: 0 auto; }*/
    div.main-menu-content ul li{display: block; height:15px; padding:.4em 0 .2em 2em; /*margin: .4em 0;*/ 
    background: url(images/main-meu-hr.png) center bottom no-repeat; text-align:left; text-transform: capitalize;z-index: 100;}
    
    /*div.main-menu-content ul li a{ display:list-item;}*/
    
    div.main-menu-content div#menuGlass{
        background: url(images/freccia.png) center right no-repeat #999999 ;
        margin-left:.3em ;
        position:absolute;
        left: 0; top: 165px;
        width : 0px; height : 20px;        
        opacity: 0.2; visibility:hidden;
        z-index: 10;
    } 

parte di html interessata

            <div class="main-menu-top"> 
                <div class="main-menu-bottom">                
                    <div class="main-menu-content">
                        [img]images/logo.png[/img]                        
                        <ul>                                            
                        
                            <li id="home">[url="#<?php echo $print->{complete_patch};?>/home"]Home[/url]
                            <li id="journal">[url="#<?php echo $print->{complete_patch};?>/journal"]Journal[/url]
                            <li id="rules">[url="#<?php echo $print->{complete_patch};?>/rules"]Rules[/url]
                            <li id="login">[url="#<?php echo $print->{complete_patch};?>/login"]Login[/url]
                            <li id="register">[url="#<?php echo $print->{complete_patch};?>/register"]Register[/url]
                            <li id="faq">[url="#<?php echo $print->{complete_patch};?>/faq"]F.A.Q[/url]
                            <li id="donations">[url="#<?php echo $print->{complete_patch};?>/donations"]Donations[/url]
                            <li id="credits" style="background: none;">[url="#<?php echo $print->{complete_patch};?>/credits"]Credits[/url]                            
                        [/list]
                        <div id="menuGlass">
                            <div id="menuGlassInner" style=" width:25px; height:100%; background-color: #ddf; visibility:hidden; opacity: 0;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

vi prego datemi una mano!