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:
@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;
El slider traía su propio, css no sé si sirva verlo:
Código:
/*
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; }
Agradezco cualquier pista, de qué podría modificar para que funcione.
Gracias,