PHP - Crear menú con varios submenús

<style>

	.dropbtn {

	  background-color: #3498DB;

	  color: white;

	  padding: 16px;

	  font-size: 16px;

	  border: none;

	  cursor: pointer;

	}

	.dropbtn:hover, .dropbtn:focus {

	  background-color: #2980B9;

	}

	.dropdown {

	  position: relative;

	  display: inline-block;

	}

	.dropdown-content {

	  display: none;

	  position: absolute;

	  background-color: #f1f1f1;

	  min-width: 160px;

	  overflow: auto;

	  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

	  z-index: 1;

	}

	.dropdown-content a {

	  color: black;

	  padding: 12px 16px;

	  text-decoration: none;

	  display: block;

	}

	.dropdown a:hover {background-color: #ddd;}

	.show {display: block;}

</style>

<div class="dropdown">

  	<button onclick="myFunction(1,this)" class="dropbtn">GPS</button>

  	<div id="myDropdown1" class="dropdown-content">

    	<a href=" ">Informes</a>

   		<a href=" ">Consultas</a>

    	<a href=" ">Registros</a>

    		<ul>

				<li><a href="">Capacitaciones</a></li>

				<li><a href="">Instalaciones</a></li>

				<li><a href="">Revisiones</a></li>

				<li><a href="">Garantias</a></li>

			</ul>

  	</div>

<script>

	/* When the user clicks on the button,

	toggle between hiding and showing the dropdown content */

	function myFunction(n,boton) {

		var drops = [

			document.getElementById("myDropdown1")

		];

		for(var i in drops){

			drops[i].classList.remove("show");

		}

		var drop = document.getElementById("myDropdown"+n);

		drop.classList.add("show");

		drop.style.left = boton.offsetLeft+"px";

		console.log(boton.offsetLeft);

	}

	// Close the dropdown if the user clicks outside of it

	window.onclick = function(event) {

	  	if (!event.target.matches('.dropbtn')) {

	    	var dropdowns = document.getElementsByClassName("dropdown-content");

	    	var i;

	    	for (i = 0; i < dropdowns.length; i++) {

	      		var openDropdown = dropdowns[i];

	      		if (openDropdown.classList.contains('show')) {

	      			openDropdown.classList.remove('show');

	      		}

	    	}

	  	}

	}

</script>