Question

我的下拉菜单有问题。语言和请求下拉列表不起作用，只有“类别”下拉列表正在运行。 javascript有问题，这是代码

HTML

<div id="mbmcpebul_wrapper" style="text-align:center;padding-left:215px;">
  <ul id="mbmcpebul_table" class="mbmcpebul_menulist css_menu">
  <li><div class="buttonbg gradient_button"><a href="Home" target="_self">Home</a></div></li>
  <li><div class="buttonbg gradient_button"><a href="Categories" target="_self">Categories</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem  first"><a href="Action" target="_self">Action</a></li>
    <li class="gradient_menuitem"><a href="Adventure" target="_self" title="">Adventure</a></li>
    <li class="gradient_menuitem"><a href="Animation" target="_self" title="">Animation</a></li>
    <li class="gradient_menuitem"><a href="Comedy" target="_self" title="">Comedy</a></li>
    <li class="gradient_menuitem"><a href="Crime" target="_self" title="">Crime</a></li>
    <li class="gradient_menuitem"><a href="Drama" target="_self" title="">Drama</a></li>
    <li class="gradient_menuitem"><a href="Family" target="_self" title="">Family</a></li>
    <li class="gradient_menuitem"><a href="Fantasy" target="_self" title="">Fantasy</a></li>
    <li class="gradient_menuitem"><a href="Horror" target="_self" title="">Horror</a></li>
    <li class="gradient_menuitem"><a href="Romance" target="_self" title="">More..</a></li>
    <li class="gradient_menuitem"><a href="Romance" target="_self" title="">Romance</a></li>
    <li class="gradient_menuitem"><a href="Sci-Fi"  target="_self" title="">Sci-Fi</a></li>
    <li class="gradient_menuitem last"><a href="Thriller" target="_self" title="">Thriller</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Browse" target="_self">Language</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Arabic" target="_self" title="">Arabic</a></li>
    <li class="gradient_menuitem"><a href="Brazilian" target="_self" title="">Brazilian</a></li>
    <li class="gradient_menuitem"><a href="Dutch" target="_self" title="">Dutch</a></li>
    <li class="gradient_menuitem"><a href="English" target="_self" title="">English</a></li>
    <li class="gradient_menuitem"><a href="French" target="_self" title="">French</a></li>
    <li class="gradient_menuitem"><a href="German" target="_self" title="">German</a></li>
    <li class="gradient_menuitem"><a href="Greek" target="_self" title="">Greek</a></li>
    <li class="gradient_menuitem"><a href="Indonesian" target="_self" title="">Indonesian</a></li>
    <li class="gradient_menuitem"><a href="Malay" target="_self" title="">Malay</a></li>
    <li class="gradient_menuitem"><a href="Norwegian" target="_self" title="">Norwegian</a></li>
    <li class="gradient_menuitem"><a href="Romanian" target="_self" title="">Romanian</a></li>
    <li class="gradient_menuitem"><a href="Spanish" target="_self" title="">Spanish</a></li>
    <li class="gradient_menuitem"><a href="Swedish" target="_self" title="">Swedish</a></li>
    <li class="gradient_menuitem"><a href="Thai" target="_self" title="">Thai</a></li>
    <li class="gradient_menuitem"><a href="Turkish" target="_self" title="">Turkish</a></li>
    <li class="gradient_menuitem last"><a href="Vietnamese" target="_self" title="">Vietnamese</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Contact/Request" target="_self">Request</a></div>
    <ul class="gradient_menu">
    <li class="gradient_menuitem first"><a href="Contact/Request-Movie" target="_self" title="">Movie</a></li>
    <li class="gradient_menuitem last"><a href="Contact/Request-Other" target="_self" title="">Other</a></li>
    </ul></li>
  <li><div class="buttonbg gradient_button"><a href="Help-us" target="_self">Help us</a></div></li>
  </ul>
</div>

完整http://jsfiddle.net/sfpj77p5/1/

Answer 1

看起来你的JavaScript根本不需要，我这样评价：

$(document).ready(function() {
    /*$(".gradient_menuitem:gt(9)").css("display","none");

$(".gradient_menuitem:eq(9)").click ( function (e) {
                                     e.preventDefault();

             $(".gradient_menuitem:gt(9)").css("display","block");       
    $(".gradient_menuitem:eq(9)").hide();
                                     });


$(".gradient_menu").mouseleave(function(){
   $(".gradient_menuitem:gt(9)").hide();       
    $(".gradient_menuitem:eq(9)").show();
});*/
});

现在你的菜单工作得很好。 Have a look

编辑：这里有什么为＆＃34;更多＆＃34; ＆＃34;类别＆＃34;中的按钮;菜单：

<li class="gradient_menuitem"><a href="Romance" target="_self" title="">More..</a>
            <ul class="gradient_menu">
                <li class="gradient_menuitem"><a href="Romance" target="_self" title="">Romance</a></li>
        <li class="gradient_menuitem"><a href="Sci-Fi"  target="_self" title="">Sci-Fi</a></li>
        <li class="gradient_menuitem last"><a href="Thriller" target="_self" title="">Thriller</a></li>
            </ul>

您只需添加＆＃34; Romance＆＃34;，＆＃34; Sci-Fi＆＃34;和＃34;惊悚＆＃34;其中的菜单位于类{＆＃34; gradient_menu＆＃34;的ul标记内。 Have a look there并只复制HTML。剩下的就是你的CSS了。

Answer 2

另一个解决方案就是更改另一个列表的类，我更改了第二个列表并且它可以正常工作

have a look

<ul class="gradient_menu2">
        <li class="gradient_menuitem2  first"><a href="Action" target="_self">Action</a></li>

DropDown菜单无效

2 个答案: