Para poder poner este menú lo teméis que poner en HTML-JAVASCRIPT.
<ul class="menured">
<li>
<a class="red1"></a>
<div>
<h5>EMPECEMOS</h5>
<a href="URL PAGINA;">TEXTO</a>
<a href=" URL PAGINA;"> TEXTO</a>
</div>
</li>
<li>
<a class="red2"></a>
<div>
<h5>Información</h5>
<a href=" URL PAGINA;">TEXTO </a>
<a href="URL PAGINA ;">TEXTO </a>
</div>
</li>
<li>
<a class="red3"></a>
<div>
<h5>En redes</h5>
<a href=" URL PAGINA;"> TEXTO</a>
<a href="URL PAGINA ;"> TEXTO</a>
</div>
</li>
<li>
<a class="red4"></a>
<div>
<h5>Contacto</h5>
<a href="URL PAGINA ;">TEXTO </a>
<a href="URL PAGINA ;"> TEXTO</a>
</div>
</li>
</ul>
<style>
ul.menured * {margin: 0 auto; padding: 0; text-indent: 0;
-moz-transition: all .5s ease-in-out;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
ul.menured {list-style: none; width: 1800px; max-width: 100%; margin: 0 auto; text-align: center;}
ul.menured li {position: relative; display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width:44px; height: 44px; overflow: hidden; margin: 2px; padding: 5px; border-radius: 44px; border: 1px solid transparent; background: #fff;
-moz-box-shadow: 1px 1px 3px #555; -webkit-box-shadow: 1px 1px 3px #555; box-shadow: 1px 1px 3px #555;}
ul.menured li a[class^=red] {position: absolute; top: 5px; left: 5px; display: block;width: 32px;height: 32px; -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);}
a.red1 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6OBxqdDLQYPBQSXoH3ge36ag4zNqWZjYZh6pw4EfuxFJY_KQ0rs-pUT593rIG3laAXNi1KMoUjVKM90gAnV1dSDQvRcMY_FfZfPCY69RwC5wWYe5ELgfI54o7fd5n6O0U6vGkyBviVsY/s32/home.png) no-repeat;}
a.red2 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHhyS4ifTDqHD_7kHZgilPIKuh5CCS1m6rR4VpAE07dKMAy7-4Rr9UfSdFRB_n2W1R6GH54FJCjaWNrEaXKJPX0nGZqqEujNQzWmnIHUktodzK5cI69c-IIROBzKiiMnnOuvQKyO_98I/s32/info.png) no-repeat;}
a.red3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTVLmJn_c-UqCn9gQierKp3UUA_7j8VBV_R2pC0gQ2tkt31lvy_fN5ElXhWHvtJchIV2p_tz9MX2ykNGPdFCY4zENQhSr7pyZq-RW5kpb34ZApWigS1rNmREZFoj7aM4iVzDKoS79yNbM/s32/redes.png) no-repeat;}
a.red4 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfg9uaxTpSRRLK3-gFe7E_hKIHHdAt-L1WaZMFSl4kfSsgYlfEghM-W3dk-MKbvab7Hn9TPJGiZrW-xWdxFaeX1tK-GBiNJzWWOUo1GxgM5HfNffAnOlGCVF94oTCJH8dLk5SH1jsXQdI/s32/contacto.png) no-repeat;}
ul.menured li div {margin: 0px 8px 5px 38px; text-align: center;}
ul.menured li div h5 {text-align: left; text-transform: uppercase;}
ul.menured li div a {display: inline;margin: 0 3px;font-size: 12px; color: #F36900;}
ul.menured div a:hover {color: grey;}
ul.menured li:hover {width:240px;}
ul.menured li:hover a[class^=red] {-moz-transform: rotate(720deg); -webkit-transform: rotate(720deg); transform: rotate(720deg);}
</style>
Podéis modificar los colores las url de las fotos de los botones, que aparecen en azul. las medias de los botones, en URL DE PAGINA la cambiáis por la que queráis direccionar sin quitar (;),y en TEXTO donde os direcciona.
Si queréis añadir mas direcciones a cada botón le añadís, <a href="URL PAGINA ;"> TEXTO</a>
