Div che copre menù. Non funzionano più i link

[Daniele78]

Al seguente menù volevo dare un effetto fadeout sovrapponendovi un div che ha come sfondo un' immagine bianca con delle semitrasparenze.
Ho ottenuto l' effetto grafico desiderato solo che adesso non funzionano più i link e neanche gli eventi IQuery.
Grazie.

Codice: Seleziona tutto


<style type="text/css">

    #ext_menu_div_gradient{
        z-index: 2;
        background:  url(images/bottom-fade.png) bottom left repeat-x;
        align:center;
        width: 15%;                     /* the same of #ext_menu_div*/
        height: 300px;                  /*Height of Menù*/
        margin-top:20px;   
        position: absolute;
    }


    #menu_container{
        align:center;
        width: 100%;
        height: 300px;                  /*Height of Menù*/
        max-height: 300px;              /*Height of Menù*/
        overflow:auto;
    }


</style>

<div id="ext_menu_div_gradient"></div>
<div id="menu_container">
    <div id="menuB">
        <a class="menuitem" href="Home">Home</a>
        <a class="menuitem" href="Conferenze%20ed%20orari">Conferenze ed orari</a>
        <a class="menuitem" href="News">News</a>
        <a class="menuitem" href="Contattaci">Contattaci</a>
        <a class="menuitem submenuheader" href="Aiutaci">Aiutaci</a>
        <div class = "submenu">
            <ul>
                <li><a href = "Dillo%20ai%20tuoi%20amici">Dillo ai tuoi amici</a></li>
                <li><a href = "Inserisci%20banner">Inserisci banner</a></li>
                <li><a href = "Tramite%20Facebook">Tramite Facebook</a></li>
            </ul>
        </div>
        <a class="menuitem" href="Attivit%C3%A0">Attivit&agrave</a>
        <a class="menuitem submenuheader" href="Sponsor">Sponsor</a>
        <div class = "submenu">
            <ul>
                <li><a href = "Diventa%20sponsor">Diventa sponsor</a></li>
                <li><a href = "I%20nostri%20sponsor">I nostri sponsor</a></li>
            </ul>
        </div>
        <a class="menuitem" href="FAQ">FAQ</a>
        <a class="menuitem" href="Segnalazioni">Segnalazioni</a>
        <a class="menuitem" href="Le%20passate%20edizioni">Le passate edizioni</a>
        <a class="menuitem" href="Rassegna%20stampa">Rassegna stampa</a>
        <a class="menuitem" href="Lo%20staff">Lo staff</a>
        <a class="menuitem" href="Video%20conferenze%202011">Video conferenze 2011</a>
        <a class="menuitem" href="Slide">Slide</a>
    </div><!--close <div id="menuB">-->
</div><!--close <div id="menu_container">-->




[angus]

Avrei un'idea, ma per verificarla vorrei poter vedere il codice completo (o almeno quanto necessario per replicare il problema).
Puoi postarlo? allegando anche le immagini?

[Daniele78]

Sì. Grazie.

[angus]

È abbastanza comprensibile che se sopra al menu ci metti 2 div, quello che c'è sotto non sia più cliccabile...

Dovresti agire sui background del contenitore del menu o sulle varie voci, a seconda dell'effetto che vuoi ottenere...
in particolare guarderei il CSS di #menu_container.. ha la proprietà background-color commentata.. se metti un'immagine lì ottieni quello che vuoi?

[Daniele78]

Perfetto grazie. Non ci avevo pensato.

[Daniele78]

Ho ancora un problema.
Linkando menu.css in index.html, e usando Firefox, appare attorno alla voce con sottomenù selezionata, un rettangolo tratteggiato che non riesco a rimuovere in alcun modo.
Per le altre voci appare anche ma solo per un istante perché si ha il reindirizzamento.
Grazie!

[Daniele78]

Ho risolto.

Bisognava aggiungere nel css

#menuB a:active{
outline: 0;
}
#menuB a:focus {
outline: 0;