Hola a todos:
Soy nuevo por aquí y soy un novato total en esto de la programación web. No he encontrado ningún post para presentaciones, por lo que os saludo desde este mismo mensaje.
Estoy programando mi primera web con
XHTML y
CSS y la ayuda de un libro de Anaya Multimedia, pero ya me estoy enfrentando a mi primer problema con la barra del menú, con el que espero me podáis ayudar. He buscado en la FAQ del foro, pero no he visto nada al respecto.
El caso es que no consigo que el menú desplegable se visualice correctamente. En concreto, el submenú se superpone a la barra principal (la lista de primer nivel) en vez de desplegarse en bloque bajo ésta, y estoy desesperado porque no sé qué es lo que está mal. He copiado el código del libro, agregando algo de formato, y, por tanto, debería salir bien, pero no es así. Lo he revisado mil veces y no me puedo creer que esté encallado en algo tan simple, pero no consigo resolverlo. Para los expertos esto será algo simple como el mecanismo de un sacapuntas, pero para mí ahora mismo es un mundo.
A continuación os pongo el código XHTML (Nota: He dejado sólo lo imprescindible para que se vea sólo el menú. Ignorad la foto bajo el menú, que es sólo de prueba):
Código:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Pedro Ortiz Olivas - Artista plástico</title>
</head>
<body>
<div id="barra_menu">
<ul id="menu">
<li id="inicio"><a href="http://www.pedroortizolivas.es">INICIO</a></li>
<li id="semblanza"><a href="http://www.pedroortizolivas.es/semblanza.html">SEMBLANZA</a></li>
<li id="trayectoria"><a href="http://www.pedroortizolivas.es/trayectoria.html">TRAYECTORIA</a>
<ul id="submenu_trayectoria">
<li id="expo_individuales">Exposiciones individuales</li>
<li id="expo_colectivas">Exposiciones colectivas</li>
<li id="expo_individuales_2">Exposiciones individuales_2</li>
<li id="expo_colectivas_2">Exposiciones colectivas_2</li>
</ul>
</li>
<li id="galeria"><a href="http://www.pedroortizolivas.es/obra.html">GALERÍA</a>
<ul id="submenu_obra">
<li id="obra_figurativa">Obra figurativa</li>
<li id="obra_abstracta">Obra abstracta</li>
<li id="obra_vanguardista">Obra vanguardista</li>
</ul>
</li>
<li id="contacto"><a href="http://www.pedroortizolivas.es/contacto.html">CONTACTO</a></li>
<li id="blog"><a href="http://www.pedroortizolivas.es/blog.html">BLOG</a></li>
</ul>
</div>
<img id="home_background" src="images/home_background.png" width="1024" height="450" alt="Pedro_Ortiz_Olivas_homepage_background" />
</body>
</html>
Y, a continuación, el código CSS:
Código:
div#cuerpo {margin:0 auto; width:1024px;}
ul#menu {
margin:0;
padding:0;
border:0 none;
width:1024px;
list-style:none;
font-size:16px;
font-family:Lucida Sans Unicode, Lucida Sans Regular, LucidaGrande sans-serif;}
ul#menu li {
margin:0;
padding-bottom:5px;
border:0 none;
float:left;
display:inline;}
ul#menu a {
display:block;
float:left;
width:auto;
height:20px;
color:#F8ECE0;
background:#610B0B;
text-align:center;
text-decoration:none;
margin-right:2px;
padding:10px;
border:1px solid black;}
ul#menu a:hover {
color:#610B0B;
background:#E8C3B7;
border:1px solid #610B0B;}
ul#menu li ul {display:none;}
ul#menu li:hover ul {
display:block;
width:10em;
position:absolute;}
ul#menu li ul li {
float:none;
width:100px;
color:#610B0B;
background:#F8ECE0;}
div#barra_menu {clear:left;}
La web se puede ver en: http://www.pedroortizolivas.es
Espero que me podáis ayudar, y os lo agradezco por adelantado.
Nos iremos viendo por aquí.
Saludos.