Rendere cliccabili link con z-index

[KillyMilkshake]

Ciao a tutti, sono nuova e avrei un problemino con il mio sito web.
Dovrei rendere cliccabili dei link, ma non so come fare...ho provato a dare lo z-index al menù, ma mi sovrappone le immagini e il menù va dietro.

Vi faccio vedere il CSS e vi ringrazio già in anticipo se riuscite a darmi una mano.


<!-- MENU -->
#menu{
position:fixed;
padding-top:6em;
text-align:center;
background-color:rgba(0,0,0,0.5);
min-width:100%;
min-height:100%;
}


#menu li a{
list-style:none outside none;
line-height:3em;
position:relative;
text-decoration:none;
color:#ea148c;
font-size:1.5em;
}


#menu li a:hover{
text-decoration:underline;
}


#menu ul{
padding:0;
}


#hamburger{
position:fixed;
left:1em;
top:1.55em;
}




/* HOME */
#sfondo{
background-image:url(../img/sfondo_.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
width:100%;
height:100%;
}


<!-- WORKS -->
#works{
margin-top:9em;
}


.works_testo{
margin-top:6em;
font-weight:bold;
font-size:24px;
text-align:center;
}


.grid-25{
padding:0;
margin:0 auto;
}


.grid-container{
padding:0;
}


<!-- PORTFOLIO -->
#portfolio{
width:100%;
height:100%;
}


#lavori{
text-align:center;
}


.titolo_lavoro{
color:#ea148c;
text-align:center;
margin-top:3em;
font-size:2.5em;
margin-bottom:0.7em;
}


.desc_lavoro{
text-align:center;
margin-top:0.5em;
color:black;
margin-bottom:1em;
line-height:2.5em;
}


.vodka{
margin-bottom:2em;
}




<!-- CONTACTS -->
#contatti{
text-align:center;
}


.contact_me{
margin-top:6em;
font-size:24px;
font-weight:bold;
text-align:center;
}


.find_me{
margin-bottom:3em;
text-align:center;
}


.indirizzo{
text-align:center;
line-height:3em;
margin-bottom:4em;
}


.email{
text-align:center;
margin-bottom:1em;
}


#icone{
text-align:center;
margin-bottom:4em;
}


#icone img{
text-align:center;
margin-left:1em;
margin-right:1em;
display:inline-block;
}


a{
text-decoration:none;
}


/* da 1200px in su */
@media only screen and (min-width: 1200px) {
/* MENU*/
#menu{
padding:0;
list-style-type:none;
word-spacing:1em;
background-color:transparent;
min-height:100%;
min-width:100%;
}


#menu li a{
list-style:none outside none;
text-decoration:none;
color:#ea148c;
font-size:1em;
}


#menu li a:hover{
text-decoration:underline;
}


#menu ul{
width:400px;
padding:0;
margin-left:2em;
display:block;
list-style-type:none;
}


#menu li{
display:inline-block;
}
}

[carlomarangoni]

devi usare questo codice nell'html:

<a href="pagina.htm" target="_self" alt="" />Testo</a>

non z-index nel css

[KillyMilkshake]

Forse mi sono spiegata male, intendevo dire che questo menù va su questa immagine (che dovrebbe riportare ad un'altra pagina).
Allego anche uno screen: Schermata 2015-06-03 alle 23.31.12.jpg

[KillyMilkshake]

Forse mi sono spiegata male, intendevo dire che questo menù va su questa immagine (che dovrebbe riportare ad un'altra pagina) e non mi fa cliccare sull'immagine sottostante.
Allego anche uno screen: Schermata 2015-06-03 alle 23.31.12.jpg

[ResianTaxidrive]

Non è che la domanda sia molto chiara comunque, perchè hai questo nel menu?
min-width:100%;
min-height:100%;

[KillyMilkshake]

Non è che la domanda sia molto chiara comunque, perchè hai questo nel menu?
min-width:100%;
min-height:100%;

Questo sito sarebbe per un esame universitario e min-width e min-height me li aveva scritti il professore perchè il menù nella versione mobile avrebbe un background color e dovrebbe occupare tutta la pagina.
Comunque in questi giorni sono riuscita a portare il menù (della versione desktop) sopra alle immagini cliccabili (ho allegato una foto), però il menù non si clicca tutto, ma si clicca solamente la scritta home.
sito.jpg

[carlomarangoni]

I prof. a volte ne sanno meno degli studenti!

Dei screenshot e del solo css non ce ne facciamo molto per capire. Dovresti trovare il modo di mettere la pagina online per poterla vedere in funzione

[KillyMilkshake]

Ecco qui il link: http://marcellabalduzzi.altervista.org/ e come potete vedere, il menù non è cliccabile quando si trova sopra alle 4 immagini.

[DakJak]

Ciao Killy osservavo i tuoi codici e la pagina, alla fine ho risolto il tutto con questa aggiunta:

#menu{
position:fixed;
padding-top:6em;
text-align:center;
background-color:rgba(0,0,0,0.5);
min-width:100%;
min-height:100%;
display:none;
z-index:50;
}

P.s.: Che facoltà?

[KillyMilkshake]

Ciao Killy osservavo i tuoi codici e la pagina, alla fine ho risolto il tutto con questa aggiunta:

#menu{
position:fixed;
padding-top:6em;
text-align:center;
background-color:rgba(0,0,0,0.5);
min-width:100%;
min-height:100%;
display:none;
z-index:50;
}

P.s.: Che facoltà?

Ho appena modificato il css aggiungendo lo z-index al menù, ma le immagini nei riquadri non sono più cliccabili (e ai riquadri vorrei dargli il webkit transition, ma non ne sono in grado... )

Studio graphic design & art direction alla naba di milano