Menu desplegable con Javascript HMTL y CSS

Menú con 3 niveles desplegables hecho con javascript HTML y CSS:

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Menu Javascript</title>

</head>

<link href="main.css" rel="stylesheet">

<script src="main.js" type="text/javascript"></script>

<body>

<header>

<h1>

Menu con Javascript

</h1>

</header>

<ul class="menu"> 

<li><a href="#" id="opcion1" onclick="ejecutarOpcion(1);"

onmouseover="cambiarFondo(1);" onmouseout="resetFondo(1)">

Opcion 1</a></li>

<li><a href="#" id="opcion2" onclick="ejecutarOpcion(2);" 

onmouseover="cambiarFondo(2);" onmouseout="resetFondo(2)">

Opcion 2</a></li>

<li>

<a href="#" id="opcion3" onclick="ejecutarOpcion(3);" 

onmouseover="cambiarFondo(3);" onmouseout="resetFondo(3)">

Opcion 3</a>

<ul class="submenu" id="submenu3">

<a href="#" id="opcion31" onclick="ejecutarOpcion(31);"

onmouseover="cambiarFondo(31);" onmouseout="resetFondo(31)">

Opcion 3.1</a>

<a href="#" id="opcion32" onclick="ejecutarOpcion(32);" 

onmouseover="cambiarFondo(32);" onmouseout="resetFondo(32)">

Opcion 3.2</a>

<a href="#" id="opcion33" onclick="ejecutarOpcion(33);"

onmouseover="cambiarFondo(33);" onmouseout="resetFondo(33)">

Opcion 3.3</a>

<a href="#" id="opcion34" onclick="ejecutarOpcion(34);" 

onmouseover="cambiarFondo(34);" onmouseout="resetFondo(34)">

Opcion 3.4</a>

<ul class="submenu" id="submenu34">

<li>

<a href="#" id="opcion341" 

onclick="ejecutarOpcion(341);" 

onmouseover="cambiarFondo(341);" 

onmouseout="resetFondo(341)">Opcion 3.4.1</a>

<a href="#" id="opcion342" 

onclick="ejecutarOpcion(342);" 

onmouseover="cambiarFondo(342);" 

onmouseout="resetFondo(342)">Opcion 3.4.2</a>

<a href="#" id="opcion343" 

onclick="ejecutarOpcion(343);" 

onmouseover="cambiarFondo(343);" 

onmouseout="resetFondo(343)">Opcion 3.4.3</a>

</li>

</ul>

</ul>

</li>

<li><a href="#" id="opcion4" onclick="ejecutarOpcion(4);" 

onmouseover="cambiarFondo(4);" onmouseout="resetFondo(4)">

Opcion 4</a>

</li>

<li><a href="#" id="opcion5" onclick="ejecutarOpcion(5);" 

onmouseover="cambiarFondo(5);" 

onmouseout="resetFondo(5)">

Opcion 5</a>

</li>

<li><a href="#" id="opcion6" onclick="ejecutarOpcion(6);" 

onmouseover="cambiarFondo(6);" onmouseout="resetFondo(6)">

Opcion 6</a>

</li>

</ul>

</body>

</html>

main.css

/* main.css */

/* Resetear los valores iniciales */

* {

margin: 0px;

padding: 0px;

text-decoration: none;

}

body{

background-color: gray;

color:white;

font-family: sans-serif;

font-size: 20px;

}

ul{

list-style-type: none;

}

.menu li{

float: left;

}

.menu li a{

padding: 10px 10px;

display: block;

width: 140px;

background-color: black;

color: white;

}

.submenu{

display: none;

}

main.js

function cambiarFondo(id){

switch (id){

case 1:

document.getElementById("opcion1").style="background-color:white;color:black;";

ocultarSubmenu();

break;

case 2:

document.getElementById("opcion2").style="background-color:white;color:black;";

ocultarSubmenu();

break;

case 3:

document.getElementById("opcion3").style="background-color:white;color:black;";

/* desplego el submenu 3 */

desplegarSubmenu(3);

break;

case 4:

document.getElementById("opcion4").style="background-color:white;color:black;";

ocultarSubmenu();

break;

case 5:

document.getElementById("opcion5").style="background-color:white;color:black;";

ocultarSubmenu();

break;

case 6:

document.getElementById("opcion6").style="background-color:white;color:black;";

ocultarSubmenu();

break;

case 31:

document.getElementById("opcion31").style="background-color:white;color:black;";

break;

case 32:

document.getElementById("opcion32").style="background-color:white;color:black;";

break;

case 33:

document.getElementById("opcion33").style="background-color:white;color:black;";

break;

case 34:

document.getElementById("opcion34").style="background-color:white;color:black;";

desplegarSubmenu(34);

break;

case 341:

document.getElementById("opcion341").style="background-color:white;color:black;";

break;

case 342:

document.getElementById("opcion342").style="background-color:white;color:black;";

break;

case 343:

document.getElementById("opcion343").style="background-color:white;color:black;";

break;

}

}

function resetFondo(id){

switch (id) {

case 1:

document.getElementById("opcion1").style="background-color:black;color:white;";

ocultarSubmenu();

break;

case 2:

document.getElementById("opcion2").style="background-color:black;color:white;";

ocultarSubmenu();

break;

case 3:

document.getElementById("opcion3").style="background-color:black;color:white;";

break;

case 4:

document.getElementById("opcion4").style="background-color:black;color:white;";

ocultarSubmenu();

break;

case 5:

document.getElementById("opcion5").style="background-color:black;color:white;";

ocultarSubmenu();

break;

case 6:

document.getElementById("opcion6").style="background-color:black;color:white;";

ocultarSubmenu();

break;

case 31:

document.getElementById("opcion31").style="background-color:black;color:white;";

break;

case 32:

document.getElementById("opcion32").style="background-color:black;color:white;";

break;

case 33:

document.getElementById("opcion33").style="background-color:black;color:white;";

break;

case 34:

document.getElementById("opcion34").style="background-color:black;color:white;";

break;

case 341:

document.getElementById("opcion341").style="background-color:black;color:white;";

break;

case 342:

document.getElementById("opcion342").style="background-color:black;color:white;";

break;

case 343:

document.getElementById("opcion343").style="background-color:black;color:white;";

break;

}

}

function ocultarSubmenu(){

document.getElementById("submenu3").style="display:none;";

document.getElementById("submenu34").style="display:none;";

}

function desplegarSubmenu(id){

switch (id){

case 3:

document.getElementById("submenu3").style="display:block;";

break;

case 34:

document.getElementById("submenu34").style="display:block;position:relative;right:-155px;top:-10px;";

break;

}

}

function ejecutarOpcion(id){

alert ("Opcion "+id);

}