Gente es mi primer post y tengo un problema con los CSS en un menu... Resulta tengo una web creada con DIV (encabezado, menu, cuerpo y pie) y necesito crear un menu con submenu en algunos de ellos para mostrar los demás archivos que necesito... El menu que hice funciona perfectamente en un archivo nuevo (sin DIV's) el cual es código de html es este.
<ul class="menu">
| <li><a href="index.html" target="_self">Inicio</a></li>
| <li><a href="#">Animación 3D</a></li>
<ul>
<li><a href="anim1.html" target="carga">Album 1</a></li>
</ul>
| <li><a href="#">Dis vectorial</a></li>
<ul>
<li><a href="disv1.html" target="carga">Album 1</a></li>
</ul>
| <li><a href="#">Diseño Web</a></li>
<ul>
<li><a href="disw1.html" target="carga">Album 1</a></li>
</ul>
| <li><a href="#">Edi Fotografía</a></li>
<ul>
<li><a href="edif.html" target="carga">Album 1</a></li>
</ul>
| <li><a href="#">Fotografía</a></li>
<ul>
<li><a href="foto1.html" target="carga">Album 1</a></li>
<li><a href="foto1.html" target="carga">Album 2</a></li>
<li><a href="foto1.html" target="carga">Album 3</a></li>
</ul>
| <li><a href="otros.html" target="_self">Otros</a></li>
| <li><a href="contacto.html" target="_self">Contacto</a></li> |
</ul>
Y este el código en CSS
a{
color: #000;
text-decoration: none;
}
#menu a:hover{
background-color: #666;
color: #FFF;
}
ul.menu
{
list-style:none;
}
ul.menu li
{
position:relative;
width:70px;
}
ul.menu ul
{
position:absolute;
left:30px;
top:-1px;
display:none;
list-style:none;
}
ul.menu li:hover > ul
{
display:block;
}
ul.menu> li > ul
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu > li
{
display:inline;
}
Este es para el archivo en una hoja nueva de html... Ahora anexo mi código CSS que utilizo en las páginas, el cual me configura los DIV's en el navegador...
body{
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
background-image: url(imagenes/background.jpg);
background-position: center;
margin: 0;
}
a{
color: #000;
}
#contenedor{
width: 650px;
height: 620px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
}
#encabezado{
width: 650px;
height: 100px;
}
#menu{
width: 650px;
height: 15px;
text-align: center;
background-image: url(imagenes/menu.jpg);
}
#menu a{
text-decoration: none;
}
#menu a:hover{
background-color: #000;
color: #FFF;
}
#cuerpo{
width: 650px;
height: 490px;
}
/*El pie de página*/
#pie{
width: 650px;
height: 15px;
}
.pie{
text-align: center;
font-size: 10px;
}
No se si quizá algo en el código principal de las páginas entra en conflicto con e código del menu y no funciona ó hay que modificar algo del código del menu para que funcione perfectamente... El problema es me aparece el submenu pero al querer posicionar el puntero sobre la opción se desaparece y tampoco queda con color...
Espero alguien me pueda ayudar ya que lo necesito para poder terminar la web y no buscar otra alternativa...