Esta es la imagen:
Donde están las flechas rojas, ya no permite colocar el cursor, porque se deja de mostrar el desplegable.
Gracias,
16/10/2013, 22:45
| ||||
| ||||
 Menu desplegable se muestra a medias Hola, les molesto con una ayuda. Tengo un menú desplegable, el cual se mostraba detrás de un slider, y en este foro leí que había que utilizar la opción z-index para que se viera adelante del slider. Solo que ahora tengo el inconveniente que se muestra hasta donde termina el slider, si coloco el cursor en las últimas opciones del submenú, simplemente se cierra como si no hubiera nada a seleccionar. Esta es la imagen: Donde están las flechas rojas, ya no permite colocar el cursor, porque se deja de mostrar el desplegable. Gracias, |
|
17/10/2013, 02:57
| ||||
| ||||
| Respuesta: Menu desplegable se muestra a medias Seguramente esa parte que no se puede seleccionar esté por debajo de otro elemento. Sin código o sin ver la web no podemos decirte. Prueba a darle un valor a z-index mayor al que tienes. |
|
17/10/2013, 11:22
| ||||
| ||||
| Respuesta: Menu desplegable se muestra a medias Hola, el z-index ya había probado incrementarlo, pero no cambia el resultado. Este es el html:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
<link href="estilosagros.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #D9D6C2;
margin-top: 0px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="header"><img src="imagenes/sublogo.jpg" width="311" height="69" alt="agros"><img src="imagenes/subtagline.jpg" width="489" height="69" alt="agros"></div>
<div id="menu" class="menu menuConClases">
<ul>
<li>
<a href="#" class="inicio">Inicio</a></li><li><a href="#" class="s1">Quienes somos</a><ul class="submenu">
<li><a href="#">Misión y visión</a></li>
<li><a href="#">Estrategias</a></li>
<li><a href="#">Junta directiva</a></li>
<li><a href="#">Valores</a></li>
<li><a href="#">Buenas prácticas</a></li>
<li><a href="#">Certificaciones</a></li>
<li><a href="#">Reconocimientos</a></li><li><a href="#">Descargas</a></li></ul></li><li><a href="#" class="s2">Donde estamos</a><ul class="submenu"><li><a href="#">El Quiché</a></li>
<li><a href="#">Huehuetenango</a></li>
<li><a href="#">San Marcos</a></li></ul></li><li><a href="#" class="s3">Qué hacemos</a><ul class="submenu">
<li><a href="#">Areas de trabajo</a></li>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Voluntarios</a></li>
<li><a href="#">Alianzas</a></li>
<li><a href="#">Redes</a></li></ul></li><li><a href="#" class="s4">Contacto</a></li>
</ul>
</div>
<div id="banner"><img src="img/example-slide-4.jpg" />
<img src="img/example-slide-3.jpg" />
<img src="img/example-slide-2.jpg" />
</div>
<div id="contenido">
<h2>Quienes somos</h2>
<p>
e by gum face like a slapped arse. Face like a slapped arse ah'll gi' thee a thick ear by 'eck breadcake. Any rooad chuffin' nora god's own county will 'e 'eckerslike nobbut a lad. Where's tha bin sup wi' 'im ne'ermind t'foot o' our stairs. Any rooad wacken thi sen up a pint 'o mild ah'll gi' thee a thick ear tell thi summat for nowt. Eeh. Th'art nesh thee god's own county appens as maybe shurrup god's own county tintintin. Be reet. Tintintin ah'll learn thi. Ah'll gi' thi summat to rooer abaht nobbut a lad tha what shu' thi gob where there's muck there's brass be reet. Ah'll box thi ears bloomin' 'eck nay lad what's that when it's at ooam. - See more at: http://tlipsum.appspot.com/#sthash.Z9HLqmn9.dpuf</p>
</div>
<div id="barra">
Colocar aquí el contenido para id "barra"
</div>
<div id="autor">
Colocar aquí el contenido para id "autor"
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#banner').coinslider({ width: 950, height: 155,navigation: false, delay: 5000 });
});
</script>
</body>
</html>
Y el CSS es:
Código:
El slider traía su propio, css no sé si sirva verlo:@charset "utf-8";
/* CSS Document */
#contenedor {
background-color: #D9D6C2;
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
}
#contenido {
background-color: #E7E9DC;
width: 660px;
float: left;
background-image: url(imagenes/orilla.jpg);
background-repeat: no-repeat;
background-position: top;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
font-family: Verdana, Geneva, sans-serif;
}
#barra {
width: 250px;
float: left;
}
#autor {
margin-right: auto;
margin-left: auto;
clear: both;
}
A:link, A:visited { text-decoration: none }
.menu ul {
text-align: center;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu li {
display: inline;
}
.menu {
background-color: #093;
padding-top: 5px;
padding-bottom: 5px;
font-family: Verdana, Geneva, sans-serif;
}
#banner {
background-color: #093;
height: 155px;
margin-bottom: 10px;
}
#header {
height: 69px;
}
.menu ul li{
position:relative;
z-index: 100;
}
.menu ul li ul.submenu{
display:none;
}
.menu ul li:hover ul{
display:block;
}
.menu ul li:hover .submenu{
display:block;
width:100%;
position:absolute;
top:130%;
left:0;
z-index: 100;
}
.menu ul li:hover .submenu li{
display:block;
}
.menu ul li:hover .submenu li a{
display:block;
padding:.6em .2em;
color:#fff;
text-decoration: none;
background-color: #693;
}
.menu ul li:hover .submenu li a:hover{
display:block;
padding:.6em .2em;
background:#1C531F;
}
/* menu CON CLASES */
.menu .inicio{
color:#fff;
background-color: #4e90cd;
padding-right: 60px;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0px;
}
.menu .inicio:hover{
background-color: #1C531F;
}
.menu .s1{
color:#fff;
background:#ab0004;
padding-top: 5px;
padding-right: 38px;
padding-bottom: 5px;
padding-left: 38px;
margin: 0px;
}
.menu .s1:hover{
background:#1C531F;
}
.menu .s2{
color:#fff;
background:#01478D;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 5px;
padding-top: 5px;
}
.menu .s2:hover{
background:#1C531F;
}
.menu .s3{
color:#fff;
background:#F90;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 5px;
padding-top: 5px;
}
.menu .s3:hover{
background:#1C531F;
}
.menu .s4{
color:#fff;
padding-left: 54px;
padding-right: 54px;
background-color: #0C0;
padding-bottom: 5px;
padding-top: 5px;
}
.menu .s4:hover{
background:#1C531F;
Código:
Agradezco cualquier pista, de qué podría modificar para que funcione./*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
Gracias, Última edición por auroaff; 17/10/2013 a las 11:38 |
|
17/10/2013, 14:57
| ||||
| ||||
| Respuesta: Menu desplegable se muestra a medias Hola, a quien le interese el problema estaba en el css del slider, hay eliminar ese css, ya se muestra correctamente el menú desplegable. |
| Etiquetas: |
