el menú desplegable queda debajo del slideshow

yerckostar · #1 (**permalink**) 16/10/2012, 17:31

bueno es eso cree un menú con listas, pero al desplegar el sub menu en "productos" este queda detrás del slideshow, lo otro que me gustaría que me ayudaras es, que el sub menu el texto queda centrado, me gustaría que estuviera pegado a la izquierda, y lo otro que no pude hacer es dejarlo centrado.... aca les dejo un link de como se ve, y les dejare la imagen de como quiero que se viera...

http://www.ystari.cl/imprenta

yerckostar · #2 (**permalink**) 16/10/2012, 17:33

esta es la imagen de como me gustaría que quedara

beguem · #3 (**permalink**) 16/10/2012, 19:31

proba con esto:

Código HTML:

<head>
<style type="text/css">
#menufondo {
  width:100%; /* Ancho del menú */
  height:40px;
  background-color: #000; /* Color de fondo */
}

.nav{
	list-style-type: none;
	left: 32%;
	position: relative;
	}
	
.nav li{
	position: relative; 
	right: auto;
	}

.nav li a {
	/*line-height:250%;/*con este editas la altura*/
	background-color: #000;
	color:#FFF;
	text-decoration:none;
	padding: 10px 15px;
	display:block;
	}
	
.nav li a:hover {
	background-color:#066;
	}

.nav > li {
	/*width: 10%;/*con este ajustas el ancho de cada pestaña*/
	float:left;
	}
.nav li ul {
	display:none;
	position:absolute;
	list-style:none;
	height: auto;
 	 padding:0px;
  	margin:0px;
	 width:100%;
	}
.nav li:hover > ul{
	display:block;
	}
.nav li ul li {
	position:relative;
	}

</style>
</head>

<body>
<div id="menufondo">
<ul class="nav">
        	<li><a href="inicio.html">INICIO</a></li>
            <li><a href="empresa.html">EMPRESA</a></li>
            <li><a href="productos.html">PRODUCTOS</a>
            	<ul>
            	 	 <li><a href="producto.html">PRODUCTO1</a></li>
                     <li><a href="inicio.html">PRODUCTO2</a></li>
                     <li><a href="inicio.html">TARJETAS DE PRESENTACION</a></li>
                </ul>
            </li>
            <li><a href="cotizacion.html">COTIZACION</a></li>
            <li><a href="contacto.html">CONTACTO</a></li>
         </ul>
         </div>
</body>

saludos espero que te sirva

yerckostar · #4 (**permalink**) 16/10/2012, 20:22

Cita:

Iniciado por beguem

proba con esto:

Código HTML:

<head>
<style type="text/css">
#menufondo {
  width:100%; /* Ancho del menú */
  height:40px;
  background-color: #000; /* Color de fondo */
}

.nav{
	list-style-type: none;
	left: 32%;
	position: relative;
	}
	
.nav li{
	position: relative; 
	right: auto;
	}

.nav li a {
	/*line-height:250%;/*con este editas la altura*/
	background-color: #000;
	color:#FFF;
	text-decoration:none;
	padding: 10px 15px;
	display:block;
	}
	
.nav li a:hover {
	background-color:#066;
	}

.nav > li {
	/*width: 10%;/*con este ajustas el ancho de cada pestaña*/
	float:left;
	}
.nav li ul {
	display:none;
	position:absolute;
	list-style:none;
	height: auto;
 	 padding:0px;
  	margin:0px;
	 width:100%;
	}
.nav li:hover > ul{
	display:block;
	}
.nav li ul li {
	position:relative;
	}

</style>
</head>

<body>
<div id="menufondo">
<ul class="nav">
        	<li><a href="inicio.html">INICIO</a></li>
            <li><a href="empresa.html">EMPRESA</a></li>
            <li><a href="productos.html">PRODUCTOS</a>
            	<ul>
            	 	 <li><a href="producto.html">PRODUCTO1</a></li>
                     <li><a href="inicio.html">PRODUCTO2</a></li>
                     <li><a href="inicio.html">TARJETAS DE PRESENTACION</a></li>
                </ul>
            </li>
            <li><a href="cotizacion.html">COTIZACION</a></li>
            <li><a href="contacto.html">CONTACTO</a></li>
         </ul>
         </div>
</body>

saludos espero que te sirva

Vale compadre lo revisare... pero lo que mas me urge es sobre el sub menu que se despliega debajo del slideshow.

así es como esta ahora:

y así es como me gustaría que se viera:

flashmax · #5 (**permalink**) 16/10/2012, 21:01

hola al div id"header" agregale
z-index: 1;
position: relative;

yerckostar · #6 (**permalink**) 16/10/2012, 21:29

Muchas gracias las 2 respuestas me fueron 100% de ayuda, quedaron OK los cambios!