Conteúdo sobreposto com drop down Menu

<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">☰ MENU</a>
<ul id="navigation_list" role="navigation">
         <li><a href="Dicas.html">Dicas</a></li>
         <li><a href="Viagens.html">Viagens</a></li>
         <li><a href="Paises.html">Paises</a></li>
         <li><a href="Comboios.html">Comboios</a></li>
         <li><a href="http://localhost/Interrail/public_html/blog/wordpress/">Blog</a></li>
</ul>
</nav>

<script>
         var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}
</script>

#navigation {
padding: 10px;
background-color: #000;
color: #fff;
text-align: right;
}
#navigation ul {
display: none;
list-style: none;
margin-right: 0;
padding-left: 0;
margin-bottom: 0;

}
#navigation ul.expanded {
display: block;
}
#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;
}
.menu_button {
display: block;
text-align: right;
color: #ffc;
text-decoration: none;
}
.menu_button:hover {
color: #58cbdb;
text-decoration: none;
}