Esta vez los molesto porque me estoy volviendo loca con una botonera desplegable y el jquery nivo. El problema que tengo es que hay una botonera horizontal (en el header) que despliega una subotonera debajo de uno de los links de forma vertical y cuando lo armo lo que me pasa es que desaparece por debajo del jquery nivo (en el div content) que esta en el div de abajo.
A continuación paso el codigo:
Código HTML :
<div class="header">
<div class="logo">
<img src="img/logo.png" width="221" height="40" alt="logo"></div>
<div class="sociales">
<ul>
<li><a href="#"><img src="img/facebool.png" width="18" height="18" alt="facebook"></a></li>
<li class="final"><a href="#"><img src="img/twitter.png" width="18" height="18" alt="twitter"></a></li>
</ul>
</div>
<div class="botonera">
<ul class="menu">
<li><a href="#" title=""><span/>Uno</a></li>
<li><a href="#" title=""><span/>DOS</a></li>
<li><a href="#" class="current" title=""><span></span>Tres</a>
<ul class="subotones">
<li><a href="#">Tres a</a></li>
<li><a href="#">Tres b</a></li>
</ul>
</li>
<li><a href="#" title=""><span/>Cuatro</a></li>
<li class="ultimo"><a href="#" title=""><span/>Cinco</a></li>
</ul>
</div>
</div>
<div class="contenido">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="producciones/a.jpg" alt="" title="" />
<a href="#"><img src="producciones/b.jpg" alt="" title="" /></a>
<img src="producciones/c.jpg" alt="" title="" data-transition="slideInLeft" />
<img src="producciones/d.jpg" alt="" title="" />
<img src="producciones/1.jpg" alt="" title="" />
<img src="producciones/2.jpg" alt="" title="" />
<img src="producciones/3.jpg" alt="" title="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
/*CSS*/
.logo{
padding-top:50px;
float:left;
}
.sociales{
margin-left:750px
}
.sociales li{
float:left;
list-style-type: none;
margin-right:10px;
}
.sociales li.final{
margin-right:0px;
}
.botonera{
float:right;
margin-top:25px;
font-size:12px;
}
.botonera li{
float:left;
list-style-type: none;
height:31px;
}
.botonera li.ultimo{
margin-right:0px;
}
.botonera li.seleccionada{
background-image: url(../img/botonera_1.png);
background-repeat: no-repeat;
width:46px;
color:white;
}
.botonera li a:hover{
color:#EB6400;
}
ul.menu {
padding: 5px;
margin: 10px 0;
list-style: none;
float: left;
}
ul.menu li {
float: left;
}
ul.menu li a {
float: left;
text-decoration: none;
color: #ccc;
padding: 0px 15px 0 0;
margin-right: 8px;
}
ul.menu li a span {
float: left;
padding-left: 7px;
display: block;
margin-top: 0px;
height: 24px;
}
ul.menu li a:hover, ul.menu li a.current {
color: white;
background-image: url(../img/botonera.jpg);
background-repeat: no-repeat;
background-position: right top;
}
ul.menu li a:hover span, ul.menu li a.current span {
background: url(../img/botonera.jpg) no-repeat top left;
}
.subotones{
clear:both;
}
ul.menu ul
{
display:none;
list-style:none;
z-index:9999;
}
ul.menu li:hover > ul
{
display:block;
}
a{
display: block;
text-decoration: none;
color: #004a80;
padding: 5px;
}
Espero haber incrustado bien el código.
Gracias de antemano por su tiempo y paciencia.
Si alguien me puede ayudar se lo agradecería mucho!!!
