Efectivamente, al desactivar javascript la accesibilidad del menú se va.. completamente. Así que para realizarlo seria necesario más o menos esto:
Código HTML:
<html>
<head>
<script>
function change() {
var ul = this.getElementsByTagName("ul")[0];
if(ul.style.display == "block") {
ul.style.display = "none";
} else {
ul.style.display = "block";
}
}
function cargar() {
var li = document.getElementById("menu").childNodes;
for(var i=0; i<li.length; i++) {
li.item(i).onclick = change;
}
}
window.onload = cargar;
</script>
<style>
#menu {
list-style: none;
padding: 0;
}
#menu a{
text-decoration: none;
display: block;
font: 14px Verdana, Geneva, sans-serif;
padding: 5px;
color: #000;
}
#menu a:hover {
background: #CCC;
}
#menu li {
width: 100px;
}
#menu li ul {
display: none;
}
#menu ul {
list-style: none;
padding-left: 15px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">ITEM1</a>
<ul>
<li>subMenu1</li>
<li>subMenu2</li>
</ul></li>
<li><a href="#">ITEM2</a><ul>
<li>subMenu1</li>
<li>subMenu2</li>
</ul></li>
<li><a href="#">ITEM3</a><ul>
<li>subMenu1</li>
<li>subMenu2</li>
</ul></li>
</ul>
</body>
</html> Es algo que se me ha ocurrido rápidamente, para no ensuciar demasiado el HTML y utilizar un poco el DOM.