alinear varios divs

[analoyra]

Hola, este es mi primera aplicacion que hago con photoshop e intentando codificar con html y css
Tengo un problema, que primero pongo los codigos y luego explico

Este es el html

Código HTML:

<div class="descripcion">
    <div class="campana">
        <div class="fecha">
         <p class="mes">Junio</p>
         <p class="dia">30</p>
        </div>
</div>  <!-- fin campaña -->
 
<ul id="menu">
        <li> <a href="#">Capacitación</a> </li>
        <li> <a href="#">Galería de imágenes</a> </li>
        <li> <a href="#">Ser Consulora</a> </li>
        <li> <a href="#">Promociones</a> </li>
        <li> <a href="#">Productos Natura</a> </li>
        <li> <a href="#">Consejos</a> </li>
        <li> <a href="#">Revista digital</a> </li>
        <li> <a href="#">Contacto</a> </li>
    </ul>
     
</div> <!-- fin descripcion -->
 

y este el css

Código CSS:

.descripcion {
   margin:0 auto;
   padding:0;
   height:188px;
   width:737px;
     }
 
 
ul#menu {
    margin:0;
    padding:0; 
    background:url(imagenes/menu.jpg) no-repeat ;
 
  }
  ul#menu li {
float:none;
height:20px;
padding-left:0px;
}  
 
.campana {
   margin:0;
   padding:0; 
   margin-left:15px;
   margin-top:16px;
   background:url(imagenes/calendario.png) no-repeat;
   width:112px;
   height:123px;
  
 }
 
 .descripcion .campana .fecha .mes {
   margin:0;
   padding:0;
   font-family:Tahoma, Verdana, arial, serfi;
   font-size:15px;
   color:white;
   margin-left:15px;
   margin-top:30px;
}
 
 .descripcion .campana .fecha .dia {
   margin:0;
   padding:0;
   font-family:Tahoma, Verdana, arial, serfi;
   font-size:50px;
   color:black;
   font-weight:bold;
   text-align:center;
}
 

tengo un conetenedor que se llama descripcion, y dentro de el quiero poner el div menu a la derecha del div campana, pero me es imposible. Logro ponerlo a la derecha pero no sacarle el margen superior, es decir me queda por debajo del div campana

Espero que me hayan entendio el problema y se agradeoce cualqueir ayuda de anetemano