Problemas con botonera desplegable + jquery

[23xy]

Hola Gente, cómo estan?
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:

<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!!!
23xy.