Menu horizontal 1 nivel
HTML

<ul id="liste">
 	<li>
 	<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Inicio</a></p>
 	</li>
 	<li>
 	<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 1</a></p>
 	</li>
 	<li>
 	<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 2 </a></p>
 	</li>
 	<li>
 	<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Pagina 3</a></p>
 	</li>
 	<li>
 	<p class="jingle"><a onmouseover="PlayMusic('url mp3');" href="http://com/">Contacto</a></p>
 	</li>
 	</ul>

<style type="text/css"><!--
 	#liste li{position: absolute;
 	top: -180px;
 	list-style-type: none;
 	float:left;
 	width:10px;
 	margin-left:50px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;}
 	#liste li a:hover{
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;--pourquoi une durée ?-----
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;------*/
 	}
 	/*-----------------------nth-1--------------------------*/
 	#liste li:nth-child(1) a {
 	background-image: url(https://lh3.googleusercontent.com/-3kwZy2jQx8w/WMAHj6CtHII/AAAAAAACtXk/69e9ko6_qgIQMuetrEU5vttys0NGxTF8wCL0B/w150-d-h50-p-rw/5c.png);
 	background-repeat: no-repeat;
 	position: absolute;
 	top: 300px;
 	height: 70px; width: 170px;
 	background-position:10px 0px;
 	padding-top: 80px;
 	color: black;
 	font-family: Edwardian Script ITC; 
 	font-size:25px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	}
 	#liste li:nth-child(1) a:hover {
 	color: #b33369;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;
 	}
 	/*-----------------------nth-2--------------------------*/
 	#liste li:nth-child(2) a {
 	background-image:url(https://lh3.googleusercontent.com/-PATtG58cIQI/WMAHykRxS_I/AAAAAAACtYA/7T2Y0k2vMogna_wsBsAYOYuvkiyHxCQvQCJoC/w150-h50-p-rw/5e.png);
 	background-repeat: no-repeat;
 	position: absolute;
 	top: 270px;margin-left:180px;
 	height: 70px; width: 150px;
 	background-position: 0px 0px;
 	padding-top: 60px;
 	color: black;
 	font-family: Edwardian Script ITC;
 	font-size:25px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	}
 	#liste li:nth-child(2) a:hover {
 	color:#2d6197;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;
 	}
 	/*-----------------------nth-3--------------------------*/
 	#liste li:nth-child(3) a {
 	background-image:url(https://lh3.googleusercontent.com/-2Nx-1X_6ptM/WMAIU2aG62I/AAAAAAACtYo/sASEL12dOt4jJPmpO3_eMXgc0I03pwB-gCL0B/w150-d-h50-p-rw/5d.png);
 	background-repeat: no-repeat;
 	position: absolute;
 	top:270px;margin-left:330px;
 	height: 70px; width: 170px;
 	background-position: 20px 0px;
 	padding-top: 60px;
 	color: black;
 	font-family: Edwardian Script ITC;
 	font-size:25px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	}
 	#liste li:nth-child(3) a:hover {
 	color:#e50141;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;
 	}
 	/*-----------------------nth-4--------------------------*/
 	#liste li:nth-child(4) a {
 	background-image: url(https://lh3.googleusercontent.com/-BTvoTIU0pMg/WMAIwxW2ezI/AAAAAAACtZU/TMg-TQ3d1f0B8GSTdlMK0RbRa-LWx5kPgCL0B/w150-d-h50-p-rw/5f.png);
 	background-repeat: no-repeat;
 	position: absolute;
 	top: 240px;margin-left:490px;
 	height: 70px; width: 180px;
 	background-position: 30px 0px;
 	padding-top: 60px;
 	color: black;
 	font-family: Edwardian Script ITC;
 	font-size:25px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	}
 	#liste li:nth-child(4) a:hover {
 	color:#82cd80;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;--pourquoi une durée ?-----*/
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;
 	}
 	 
 	/*-----------------------nth-5--------------------------*/
 	#liste li:nth-child(5) a {
 	background-image: url(https://lh3.googleusercontent.com/-tofoB21W2EY/WMAKRNKdn4I/AAAAAAACtaQ/MzQhHUlqh3IdmALika9TjlboylgSj-CxACL0B/w150-d-h50-p-rw/5g.png);
 	background-repeat: no-repeat;
 	position: absolute;
 	top:270px;margin-left:710px;
 	height: 70px; width: 170px;
 	background-position: 0px 0px;
 	padding-top: 60px;
 	color: #000;
 	font-family: Edwardian Script ITC;
 	font-size:25px;
 	transition: all 1s ease 0s;
 	-webkit-transition: 1s;
 	-moz-transition: 1s;
 	}
 	#liste li:nth-child(5) a:hover {
 	color:#dc8100;
 	transform:scale(1.2);
 	-webkit-transform:scale(1.2);
 	-moz-transform:scale(1.2);
 	transition: all 1s ease 0s;
 	/*---animation-duration: 0.5s;-------*/
 	-webkit-transition: 0.5s;
 	-moz-transition: 0.5s;
 	transition:0.5s;
 	}
 	--></style>