Hola a todos buen día, tengo dos pequeños problemas con un menú horizontal desplegable, que estoy haciendo para mi web.
El primer problema es que no puedo centrar la barra de menú dentro del div en el que se encuentra.
By [URL=http://profile.imageshack.us/user/saguilera85]saguilera85[/URL] at 2012-09-10
El segundo problema es con los submenus desplegables ya que cuando paso el cursor por encima del menú en lugar de desplegar el sub-menú hacia abajo lo hace hacia un costado.
By [URL=http://profile.imageshack.us/user/saguilera85]saguilera85[/URL] at 2012-09-10
Ya he probado con float, position, hacer otro div, y algunas cosas mas que he encontrado tanto en este foro como en otros, pero no doy con el error.
Les dejo el código HTML:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ejemplo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" title="style.css" type="text/css" href="style.css">
</head>
<body>
<div id="cabezera">
<p><img alt="Logotipo" src=""></p>
</div>
<div id="contenido">
<div id="menu">
<ul id="botones">
<li><a href="index.html">Inicio</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="servicios.html">Servicios</a></li>
<li><a href="productos.html">Productos</a>
<ul>
<li><a href="producto1.html">Producto 1</a></li>
</ul>
</li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</div>
<h1>Encabezado 1</h1>
<p>Contenido</p>
<h1>Encabezado 2</h1>
<p>Contenido</p>
<div id="pie">
<div id="copyright">
<p>Diseñado por <a href="yo">Yo</a></p>
<p>© 2012 Todos los Derechos Reservados</p>
</div>
<div id="redes">
<p>Síguenos en... <a href="https://twitter.com/"><img alt="Logo Twitter" src="images/twitter.png"></a> <a href="http://www.facebook.com/"> <img alt="Logo Facebook" src="images/facebook.png"></a></p>
</div>
</div>
</div>
</body>
</html>
Aquí el código CSS:
Código:
/*El fondo color de este color*/
body {
background-color: #dadada;
}
/*Aquí va el logo*/
#cabezera {
width: 800px;
margin-left: auto;
margin-right: auto;
}
/*Aquí Comienza el menú*/
#menu {
overflow: hidden;
width: 100%;
}
#botones {
padding: 0;
}
#botones li {
display: inline;
}
#botones li a {
font-family: Arial, Helvetica, serif;
font-size: 18px;
text-decoration: none;
float: left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}
#botones li a:hover {
background-color: #2586d7;
margin-top: -2px;
padding-bottom: 12px;
}
/*Aquí empieza la configuración del Submenú*/
#botones li ul {
display: none;
position: absolute;
min-width: 140px;
}
#botones li:hover > ul {
display: block;
position: relative;
float: left;
}
/*La configuración del div que tiene todo el contenido de la página*/
#contenido {
width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #595959;
border: solid 1px blue;
border-radius: 7px;
text-align: justify;
}
h1 {
margin-left: 10px;
font-family: Verdana, Helvetica, serif;
color: #fff;
}
p {
margin-left: 10px;
margin-right: 10px;
font-family: Arial, Helvetica, serif;
color: #fff;
}
span {
font-family: Verdana, Helvetica, serif;
color: #fff;
}
/*Aquí van el Copyright y las Redes Sociales*/
#pie {
font-family: Verdana, Helvetica, "sans serif";
font-size: 12px;
line-height: 3px;
overflow: hidden;
width: 100%;
}
#copyright {
height: inherit;
float: left;
}
#redes {
height: inherit;
float: right;
}
Espero me puedan sugerir alguna solución o algún tutorial, de antemano agradezco su tiempo y respuestas.
Saludos !!!!!