Problemas con el Menu Horizonal y Contenido

Gundam01 · #1 (**permalink**) 04/10/2012, 10:42

Muy Buenos Dias :)

Llevo una semana que aprendo como crear una pagina web haciendo preguntas en google y hacer lecturas respecto al tema, y no habia tenido problemas hasta ahorita.

Hago una pagina de internet para el negocio en donde trabajo, coloque una imagen centrada a lo ancho de la parte superior de la pagina (Razon Social) y abajo un menu horizontal desplegable (con sub-menus) donde al pasar el mouse en una categoria se despliega hacia abajo una pequenia lista y mi problema es que al insertar cualquier cosa por debajo de ese menu, no se queda ahi, predeterminadamente si es un texto se mantiene a lado izquiero, pero por ejemplo, si paso el mouse por mi menu, cuando se despliega, el texto se mueve y no he encontrado una solucion a esto

Espero y me puedan ayudar, Gracias!

flashmax · #2 (**permalink**) 04/10/2012, 11:16

talves tengas que colocar tu menú con z-index abría que ver un poco de código

Gundam01 · #3 (**permalink**) 04/10/2012, 11:52

Este es el codigo HTML
<html>
<head><title>#</title>
<link href="estilos3.css" rel="stylesheet" type="text/css" /><head>
<body>
<img id="bg" src="C:\Users\Usuario\Documents\ejemplo-ccusw\abstract-blue-backgrounds-40_1920x1200_71456.jpg" alt="Fondo" />
<center>
<a href="http://mx.yahoo.com/?p=us"><img src="C:\Users\Usuario\Documents\ejemplo-ccusw\Captura.PNG" alt="#" /></a>
</center>
<div>
<p>
<ul id="menu-horizontal">
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Inicio">INICIO</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Computadoras">COMPUTADORAS</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Procesador">INTEL</a></li>
</ul>
</li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Laptops">LAPTOPS</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">HP</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">COMPAQ</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">DELL</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">TOSHIBA</a></li>
</ul>
</li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Impresoras">IMPRESORAS</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">INYECCION</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">TODO EN UNO</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">LAZER NEGRO</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">LAZER COLOR</a></li>
</ul>
</li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Cargadores">CARGADORES</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">HP/COMPAQ</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">DELL</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">SONY</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">ACER</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">GATEWAY</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">TOSHIBA</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">ASUS</a></li>
</ul>
</li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Accesorios">ACCESORIOS</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">P/ COMPUTADORA</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">P/ LAPTOPS</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">P/ TABLETS</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">AUDIFONOS</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">CABLES</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">MEORIAS USB</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">MEMORIAS SD</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">ADAPTADORES BLUETOOTH</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">LECTORES SD/M2</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Tipo">USB HUB</a></li>
</ul>
</li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Computadoras">TINTAS</a>
<ul>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">HP</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">CANON</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">LEXMARK</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">EPSON</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">KODAK</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">DELL</a></li>
<li><a href="C:\Users\Usuario\Documents\ejemplo-ccusw\index.html"" title="Marca">KIT DE RELLENO</a></li>
</ul>
</li>
</ul>
</body>
</html>

Gundam01 · #4 (**permalink**) 04/10/2012, 11:54

CSS del Menu:
position: relative;
top: 24;
left:0;
margin:0;
padding:0;
background:#0066CC;
}

ul#menu-horizontal ul li {
display: block !important;
}

ul#menu-horizontal li:hover ul{
display: none;
}

ul#menu-horizontal li:hover ul{
display: block;
}

#menu-horizontal {
width:1380px;
margin:-16 auto;
}

#menu-horizontal li {
margin:0 1px;
width:178px;
min-height:50px;
text-align:center;
background:#2175bc;
list-style:none;
padding:2px 0;
}

#menu-horizontal li:hover {
background:#0066CC;
}

#menu-horizontal li a {
font:bold 18px Arial, Helvetica, sans-serif;
color:#FFF;
text-decoration:none;
}

#menu-horizontal li ul li{
float:none;
width:178px;
margin:1px 0;
}

Gundam01 · #5 (**permalink**) 05/10/2012, 11:21

Cita:

Iniciado por flashmax

talves tengas que colocar tu menú con z-index abría que ver un poco de código

Podrias decirme donde iria esa configuracion?