Aplicar estilo a lista

[canariozgz]

Hola amigos vamos a ver que no me aclaro, tengo el siguiente codigo definiendome un estilo:

<style>

ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #000000;
font-family: Verdana;
font-size:10;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 119px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #FFFFFF;
background: #000000; /* IE6 Bug */
padding: 15px;
border: 1px solid #000000;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover { color: #000000; background: #FFFFFF; } /* Hover Styles */

li ul li a { padding: 7px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */

</style>


y ahora tengo la siguiente lista:

<ul>

<li><a href="#">Home</a></li>
<li><a href="#">Miembros Junta</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Habito</a></li>
<li><a href="#">Recorridos</a></li>
<li><a href="#">Actividades</a></li>
<li><a href="#">Obra Social</a></li>
<li><a href="#">Galeria Fotos</a></li>
<li><a href="#">Exaltacion España</a></li>
<li><a href="#">Cofradias Zaragoza</a></li>
<li><a href="#">Colaboradores</a></li>
<li><a href="#">Otros Enlaces</a></li>
<li><a href="#">Contacta</a></li>
</ul>

y ahora tengo una capa, el codigo de la capa es

<div id="Layer1">

</div>

ahi dentro pego la lista y quiero que me aparezca con el estilo del codigo que he puesto y no lo consigo, me suena que los estilos se ponen en un archivo aparte...

el caso es que quiero que esa lista, me aparezca dentro de una capa con el estilo que he definido, alguna idea??

gracias

[RBZ]

Si quieres que esos estilos sólo afecten a ese div lo que tienes que hacer es definir el estilo para el sólo. Sería tal que así:

Código:

#layer1 ul {
margin: 0;
padding: 0;
list-style: none;
width: 120px; /* Width of Menu Items */
border-bottom: 1px solid #000000;
font-family: Verdana;
font-size:10;
}
#layer1 ul li {
position: relative;
}
etc...

En el body lo llamas igual.

<div id="layer1">

</div>