Come da titolo i sottomenù del menù appena creato vengono coperti dall'header e non riesco ad individuare la causa di ciò.
codice HTML:
<body>
<nav>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="#">REGIONI</a>
<ul>
<li><a href="#">NORD</a>
<ul>
<li><a href="regioni/lombardia/lombardia.html">LOMBARDIA</a></li>
</ul>
</li>
<li><a href="#">CENTRO</a>
<ul>
<li><a href="regioni/abruzzo/abruzzo.html">ABRUZZO</a></li>
</ul>
</li>
<li><a href="#">SUD</a>
<ul>
<li><a href="regioni/sicilia/sicilia.html">SICILIA</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<header>
<h1>Italia & Dintorni</h1>
</header>
codice:
nav {
margin: 100px 0;
background-color: #000000;
}
nav ul {
padding: 0;
margin: 0;
position: relative;
list-style-type: none;
}
nav ul li {
margin: 0 -7px 0 0;
display: inline-block;
background-color: #000000;
}
nav a {
display: block;
padding: 0 10px;
color: #FFFFFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav a:hover {
background-color: lightgray;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
header {
position: relative;
height: 400px;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: 2px 2px 5px gray;
}
h1 {
font-size: 200px;
font-weight: bold;
color: gold;
text-shadow: 1px 1px 10px gray;
text-align: center;
padding-top: 55px;
}
Un aiutino?