多级下拉菜单，下拉问题

问题描述：

问题出在下拉菜单中。这是一个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; 
         }

它的工作原理，如果我下的菜单中删除幻灯片。

它也是一个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();});

的另一个问题是箭......箭头需要展现出来，其中一个孩子的菜单是存在的。

任何想法？

我认为这是工作只是悬停在遇到你的候选人 – 2011-02-25 09:37:25

答

visibility: "visible",display: "none"

这可能是自相矛盾的。尝试仅在想要隐藏时使用display:none;，而在要显示时尝试使用display:block;。

很难将之与您的代码作为jQuery的返回以下错误：

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

更新（@ 11：07 GMT）：

我用下面的多余的HTML和jQuery这个例子 - 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;'); 
    }); 
});

我不得不使用<div />和<p />是因为有东西在你的CSS那不是出·您应该尝试使用这个作为一个开始，但理清你的HTML和CSS因此您可以使用<ul> s和<li> s正确标记它。

希望这会有所帮助。

非常感谢你的答案。我一定会尝试你的建议。 – 2011-02-25 09:47:59

感谢您花时间给我答案。我做了你提出的改变，但没有成功。 – 2011-02-25 10:44:48

嗨@洪，请查看我的答案更新。这是您前进的起点。 – Alex 2011-02-25 11:13:10

答

对于箭头

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

感谢您花时间给我答案。我添加了代码行，但没有成功。 – 2011-02-25 10:41:38

@Hun不是滑动工作，我认为它只是在'满足你的候选'菜单上工作，当然，它下降 – 2011-02-25 10:59:31

不，幻灯片工作正常。没有问题。子菜单只能与@Alex Thomas在上述讨论中提供的解决方案一起使用。为此，如果这仍然是唯一的解决方案，我将需要在生成菜单结构的WordPress文件中进行更改。在此之前，我添加了你的线，现在出现了箭头。请参阅我的描述中的链接。非常感谢。另一个棘手的事情是，一个自己写了CSS，我今天才意识到，“二十”默认的WordPress主题支持多级下拉菜单。多么伤心，我:)）） – 2011-02-25 12:16:17

答

现状：

箭头的作品得益于@experimentX，我们有感谢@Alex托马斯下拉菜单的解决方案。

我想出了一件事。有以下类：

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

如果我删除overflow，将工作的下拉菜单，但幻灯片将移动到页面顶部的右侧。我想为此我需要替代方案。

多级下拉菜单，下拉问题

相关推荐