Modificar Menu Vertical con Plantilla Clean-Popular

Hola!! por favor alguien sabe como modificar con la plantilla clean popular el menú vertical, quisiera colocar este que hice en esta pagina pero no se donde pegar el codigo porque el los espacios "arriba o abajo" se aplica donde no es.

Esta es la pagina:

http://cssmenumaker.com/builder/534203

y este es el codigo HTML del diseño que hice:

<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Pagina de inicio</span></a></li>
<li><a href='#'><span>Dublín</span></a></li>
<li><a href='#'><span>Nosotros</span></a></li>
<li><a href='#'><span>Nuestras Escuelas</span></a></li>
<li><a href='#'><span>Leinster College</span></a></li>
<li><a href='#'><span>CES</span></a></li>
<li><a href='#'><span>English Language School</span></a></li>
<li><a href='#'><span>Atlas Language School</span></a></li>
<li><a href='#'><span>VISTA RAPIDA</span></a></li>
<li><a href='#'><span>Formulario de Inscripción</span></a></li>
<li><a href='#'><span>Visa estudiantil</span></a></li>
<li><a href='#'><span>CADIVI</span></a></li>
<li><a href='#'><span>Archivo</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
<li class='last'><a href='#'><span>Titulo de nueva pagina</span></a></li>
</ul>
</div>


Y este el codigo CSS:

#cssmenu {
width: 125px;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 35px;
text-transform: uppercase;
font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(bg-bubplastic-button.gif) top left no-repeat;
}

#cssmenu ul li a span {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 35px;
background: transparent url(bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}

#cssmenu ul li a:hover,
#cssmenu ul li.active a {
background: transparent url(bg-bubplastic-h-red.gif) top left no-repeat;
}
#cssmenu ul li a:hover span,
#cssmenu ul li.active a span {
background: transparent url(bg-bubplastic-h-red.gif) top right no-repeat;
}



Agradezco mucho su ayuda!!

Hola,
No puedes cambiar el menu de clean por uno externo. Este viene directamente pegado en el codigo fuente de tu pagina.
Aun asi, puedes colocar el menu de modo alternativo si gustas.
El codigo esta bien solo falta reemplazar las urls.

Te explico,
La url de la pagina de inicio la debes poner,

Los # los cambias por la url de cada pagina tambien,

Asi los vas reemplazando.
El primer codigo completo es el menu y utilizas este code para posicionarlo en cualquier parte de tu web,

left: izquierda
top: arriba

Esos son los valores para posicionarlo.

El segundo codigo es el css del menu.
Debes subir las imagenes que tienes en la carpeta que descargaste de css menu maker,
http://www.paginawebgratis.es/bilder.php

y luego reemplazar las urls, que te las marque en rojo

Y ese codigo lo colocas en css code sin style tags, o bien en texto por encima entre las style tags,

Salu2!