Salve a tutti, il mio intento è replicare questo pezzo di sito(immagine in allegato). Il problema è che quando voglio fare un div per la scritta home, sembra che venga sovrapposto dal div padre. Ho provato per testare a cambiare il colore del div home, ma rimane sempre grigio. Come posso fare? Grazie a tutti.
codice:
<html> <head>
<style>
#testa{
display:block;
background-color:#FF9900;
width:101%;
height:12.5%;
margin:-7px;
}
#barra{
display:block;
background-color:#666666;
width:101%;
height:4%;
margin:-7px;
margin-top:8px;
}
#home{
display:block;
width:7%;
height:4%;
background-color:black;
z-index:0;
}
#home:hover{
background-color:black;
}
#home.a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div id = "main">
<div id = "testa">
</div>
<div id = "corpo">
<div id = "barra">
<div id = "home">
<a href = "Home.html" style = "color:white; text-decoration:none; vertical-align:center;"> Home </a>
</div>
</div>
</div>
</div>
</body>
</html>