Tengo una web http://www.loftdelborn.es/bienvenido.php con un menú que se activa mediante el siguiente código JavaScrit:

Código Javascript :

                <script type="text/javascript">
         $(document).ready(function() {
            $('#header a:first').hover(function(){
               $(".submenu").fadeOut(700)}).bind("click", function(){
               $("#filosofia").fadeIn(700).siblings(".conta").hide();
            });
            $('#header a:eq(1)').hover(function(){
               $(".submenu").fadeOut(700)}).bind("click", function(){
               $("#comoes").fadeIn(700).siblings(".conta").hide();
            });
            $('#header a:eq(2)').hover(function(){
               $(".submenu").fadeIn(700)
            });
            $(".submenu").bind("click", function(){
               $("#cartas").fadeIn(700).children("div").cycle('reinit').siblings(".conta").hide();
            });

            $('#header a:last').hover(function(){
               $(".submenu").fadeOut(700)}).bind("click", function(){
               $("#direccion").fadeIn(700).siblings(".conta").hide();
            });
         });
      </script>


Y a continuación pondré el código HTML:

Código HTML :

<!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">
<html>
   <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
      <meta name="description" content="" />
      <meta name="keywords" content="" />
      <meta name="robots" content="all, index, follow" />
      <title>Loft del Born</title>
      <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
      <script type="text/javascript" src="js/jquery.cycle2.min.js"></script>
      <link type="text/css" href="css/styles.css" rel="stylesheet" media="screen" />
   </head>
<body>
      <div class="cont">
         <ul id="header">
            <li><a href="#">&iquest;Qu&eacute; es?</a></li>
            <li><a href="#">&iquest;C&oacute;mo es?</a></li>
            <li><a href="#">&iquest;Qu&eacute; tiene?</a></li>
               <ul class="submenu">
   <li><a href="#">Carta</a></li>
   <li><a href="#">Vinos</a></li> 
   <li><a href="#">C&oacute;cteles</a></li> 
               </ul>
            <li><a href="#">&iquest;D&oacute;nde est&aacute;?</a></li>         
</ul>
</div>
         <a id="social" href="#"><span>EL<br/>
        SALONCITO</span><br/><span>DEL</span><br/>LOFT<br/>DEL<br/>BORN</a>
         <div class="conta" id="filosofia">
            <p>Loft se define por lo que no es.<br/>No es un bar de copas. No es un restaurante.<br/>Tampoco es una cocteler&iacute;a.<br/>Loft es un espacio que puede ser todo eso a la vez.<br/> Un vermut a media ma&ntilde;ana. Un caf&eacute; r&aacute;pido en la barra. Un tapeo para comer. Un trozo de tarta a la hora de la merienda.<br/>Una cena con un buen vino o una buena copa en sof&aacute;.</p><br/>
            <p>Un espacio que no se acaba. Que se llena de momentos y que se disfruta diferente cada vez. Todo eso puede ser Loft.</p><br/>
            <p>&iquest;Te apetece entrar?</p>
         </div>
         <div class="conta" id="comoes">
            <div class="cycle-slideshow">
               <img src="img/Como-es/1.jpg"  />
               <img src="img/Como-es/2.jpg"  />
               <img src="img/Como-es/3.jpg"  />
               <img src="img/Como-es/4.jpg"  />
               <img src="img/Como-es/5.jpg"  />
         </div></div>
         <div class="conta" id="cartas">
<ul class="cycle-slideshow" data-cycle-slides="li">
    <li><img src="img/Cartas/Carta-Castellano/1.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/2.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/3.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/4.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/5.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/6.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/7.jpg"></li>
    <li><img src="img/Cartas/Carta-Castellano/8.jpg"></li>
</ul>
         </div>
         <div class="conta" id="cartas">
<ul class="cycle-slideshow" data-cycle-slides="li">
               <li><img src="img/Vinos/Vinos-Castellano/1.jpg"></li>
               <li><img src="img/Vinos/Vinos-Castellano/2.jpg"></li>
               <li><img src="img/Vinos/Vinos-Castellano/3.jpg"></li>
</ul>
         </div>
         <div class="conta" id="cartas">
<ul class="cycle-slideshow" data-cycle-slides="li">
               <li><img src="img/Cocteles/Cocteles-Castellano/1.jpg"></li>
               <li><img src="img/Cocteles/Cocteles-Castellano/2.jpg"></li>
               <li><img src="img/Cocteles/Cocteles-Castellano/3.jpg"></li>
               <li><img src="img/Cocteles/Cocteles-Castellano/4.jpg"></li>
</ul>
         </div>
         <div class="conta" id="direccion">
</div>
      <script type="text/javascript">
         $(document).ready(function() {
         
         // Código JavaScript anteriormente mencionado
         
   }
     </script>
   </body>
</html>


Si entráis en la web, podréis observar al intentáis entrar en uno de los tres submenús, del item "padre" ¿Qué tiene? > carta, vinos, cócteles, apreciaréis que no sucede nada, y lo que necesito es poder hacer que se presenten igual que con los demás items de menú.

Y además, si se cambia de manera rápida del item ¿Cómo es? al de ¿Qué tiene?, y de manera repetitiva (es decir, del item A al item B y luego al A y más de lo mismo......), podréis daros cuenta que las imágenes se superponen, cosa que empleando el mismo sistema con distintos items de menú, no sucede.

Muchas gracias de antemano.