Sólo con HTML no podrás hacerlo así que tendrás que añadir código JavaScript o usar alguna librería como JQuery. Yo hace tiempo hice una prueba para tener un elemento y que al posicionarte encima enseñe una serie de elementos, te puedo mostrar el código y luego tú lo puedes adaptar a tus necesidades.
Código HTML:
<html>
<head>
<title>Menu desplegable</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#desplegar").css('display','none');
$("p").mouseenter(function() {
$("#desplegar").show('slow');
});
$("p").mouseleave(function() {
$("#desplegar").hide('slow');
});
});
</script>
</head>
<body>
<p>Menu</p>
<ul id="desplegar">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</body>
</html> Cómo puedes ver en el body tengo una etiqueta <p> y una lista desordenada que contiene cuatro items.
En la parte del <script> debes agregar el archivo de JQuery que te lo puedes bajar desde su página.
En la segunda etiqueta <script> está escrito el código JQuery que lo que hace es lo siguiente:
Al cargar la página ocultará la lista <ul>:
Código:
$("#desplegar").css('display','none');
Cuando te posiciones encima de la etiqueta <p> mostrará la lista mediante un show.
Código:
$("p").mouseenter(function() {
$("#desplegar").show('slow');
});
Cuando quites el ratón de encima de la etiqueta <p> volverá a ocultar la lista <ul>
Código:
$("p").mouseleave(function() {
$("#desplegar").hide('slow');
});
Espero que este ejemplo te sirva de guía para lo que necesitas hacer :)