Salve a tutti!
Ho realizzato un semplicissimo menu orizzontale ma ho un problema... il menu esteticamente è venuto come lo volevo solo che non riesco a fare in modo che mi apra le pagine anche se clicco sulla casella e non necessariamente sul testo della casella, ecco un'immagine per farvi capire meglio...
Immagine.jpg
il menu deve aprire la pagina in entrambi i casi... 
Ho apportato diverse modifiche osservando anche altri menu che ho trovato su internet ma senza nessun risultato.. non riesco proprio a capire come fare... 


Ecco il codice completo
codice HTML:
<!DOCTYPE html><html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Senza nome 1</title>
<style>
.menu{
position:fixed; top:0px; left:0px;
border-bottom:4px solid #000000;
list-style:none; margin:0;
padding:0; display:table;
z-index:350; width:100%;
}
.menu li{
display:inline-block;
font-weight:bold;
text-align:center;
padding:10px 0px 10px 0px;
width:16.66666666666667%;
}
.menu li a{
cursor:pointer;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-shadow: 1px 1px 2px #666666;
}
.menu a:link,
.menu a:visited{
color: #fff;
text-decoration:none;
font-variant:small-caps;
}
</style>
</head>
<body>
<ul class="menu">
<li style="background-color:#404040;"><a href="#section1" style="color:#e5e4e2;">Section1</a></li>
<li style="background-color:#ffc900;"><a href="#section2">Section2</a></li>
<li style="background-color:#ff8957;"><a href="#section3">Section3</a></li>
<li style="background-color:#ff2525;"><a href="#section4">Section4</a></li>
<li style="background-color:#bad700;"><a href="#sectopm5">Section5</a></li>
<li style="background-color:#49b6e8;"><a href="#section6">Section6</a></li>
</ul>
</body>
</html>