le menu déroulant à plusieurs niveaux, un problème déroulant

Question

Le menu est ici: http://voteacnng.org

problème est avec menu déroulant. C'est un code généré par WordPress.

Css:

.menu-tophorizontalmenu-container { 
    margin: 18px auto 21px; 
    overflow: hidden; 
    width: 1005px; 
    display: block; 
} 

    .menu { 
     list-style: none; 
     margin: 0 auto; 
     padding: 0; 
    } 

    .menu * { 
     margin: 0; 
     padding: 0; 
    } 

     .menu a { 
      display: block; 
      color: #fff; 
      padding: 6px 16px; 
      background: #000; 
     } 

     .menu li { 
      position: relative; 
      float: left; 
      font-size: 18px; 
      margin: 2px 2px 0 0; 
      text-transform: uppercase; 
     } 

      .menu ul { 
       position: absolute; 
       top: 33px; 
       left: 0; 
       background: #000; 
       display: none; 
       list-style: none; 
       z-index: 999px; 
      } 

       .menu ul li { 
        position: relative; 
        display: block; 
        width: 257px; 
        margin: 0 0 2px 0; 
        padding: 0; 
       } 

        .menu ul li a { 
         display: block; 
         padding: 6px 16px; 
         color: #fff; 
         background: #000; 
        } 

        .menu ul li a:hover { 
         background: #1191B7; 
         color: #000; 
        } 

         .menu ul ul { 
          left: 257px; 
          top: 0; 
         } 

         .menu .menulink { 

         } 

         .menu .sub { 
          background: url(img/arrow-left.jpg) no-repeat 136px 8px; 
         } 

Il fonctionne si je supprimer le diaporama dans le menu.

Il a aussi un JavaScript:

function mainmenu(){$(" #menu-tophorizontalmenu ul ").css({display: "none"}); // Opera Fix $(" #menu-tophorizontalmenu li").hover(function(){ 
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); 
    },function(){ 
    $(this).find('ul:first').css({visibility: "hidden"}); 
    });} $(document).ready(function(){     
mainmenu();}); 

Un autre problème est la flèche ... La flèche doit apparaître où un menu enfant est présent.

Des idées?

Answer 1

visibility: "visible",display: "none" 

Cela peut se contredirait. Essayez simplement d'utiliser display:none; lorsque vous voulez cacher et display:block; lorsque vous voulez montrer.

Il est difficile de relier ceci à votre code comme le jQuery renvoie l'erreur suivante:

No elements were found with the selector: "ul:first"

Mise à jour (@ 11: 07 GMT):

Je l'ai utilisé le suivant HTML supplémentaire et jQuery sur cet exemple - check jsfiddle

HTML:

<div class="menu-tophorizontalmenu-container"> 
    <ul id="menu-tophorizontalmenu" class="menu"> 
    <li id="menu-item-36" class="menu-item menu-item-type-custom menu-item-home menu-item-36"> 
     <a href="http://voteacnng.org">Homepage</a> 
     <div style="display:none;"> 
     <p>I am a</p> 
     <p>menu item</p> 
     <p>can you see?</p> 
     </div> 
    </li> 
    // Other menu items 
    <li>...</li> 
    </ul> 
</div> 

jQuery:

$("#menu-item-36").hover(function(){ 
    $("#menu-item-36").find("div").attr('style', 'display:block;'); 
    $(this).mouseout(function(){ 
     $("#menu-item-36").find("div").attr('style', 'display:none;'); 
    }); 
}); 

J'ai dû utiliser un <div /> et <p /> s parce qu'il ya quelque chose dans votre CSS thats pas montrer <ul /> s Vous devriez essayer d'utiliser cela comme un début, mais trier votre code HTML et CSS donc vous pouvez le marquer correctement avec <ul> s et <li> s.

Hope Cela aide. fonctionne grâce à @experimentX et nous avons la solution pour les listes déroulantes grâce à Thomas

@ Alex

Flèches:

Answer 2

Pour flèche

$("#menu-tophorizontalmenu ul").closest('li').find('a').prepend('>>'); 

Answer 3

Situation actuelle.

J'ai compris quelque chose. Il y a la classe suivante:

.TopHorizontalMenu { 
     margin: 18px auto 21px; 
     overflow: hidden; 
     width: 1005px; 
     display: block; 
    } 

Si je supprime le overflow, fonctionnera mais les menus déroulants le diaporama se déplace vers la partie supérieure droite de la page. Je pense que pour cela j'ai besoin de l'alternative.