Question

我写这个菜单，我有第二个子菜单的问题。它没有打开第二个子菜单项。我该怎么办???

<div id='cssmenu'>
                    <ul>
                        <li class='active'><a href='index.html'><span>normal menu</span></a></li>

                        <li class='has-sub'><a href='#'><span>menu with sub menu</span></a>
                            <ul>
                                <li><a href='#'><span>first sub menu</span></a></li>
                                <ul>
                                    <li><a href='#'><span>second sub menu</span></a></li>
                                </ul>
                                <li><a href='#'><span>normal menu</span></a></li>
                                <li class='last'><a href='#'><span>normal menu</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </div>

我使用jquery-1.7.2.min.js，这是我的jaquery代码：

$(document).ready(function () {
    $('#cssmenu > ul > li > a').click(function () {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#cssmenu ul ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
});

Answer 1

http://jsfiddle.net/PVH5U/

$(document).ready(function () {
    $('.has-sub > a').click(function () {
        var submenu = $(this).next();
        if(submenu.is(":visible")){
            submenu.slideUp();
        }
        else{
            submenu.slideDown();
        }
    });
});

Answer 2

just try this format of coding 
html



      <div id="menu">
    <ul id="sub">

    <li>one</li>
    <li>two</li>
    <li>three<ul id="second">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul></li>
    <li>Four</li>
    <li>five</li>
    <li>six</li>

    </ul>
    </div>

css



     #menu{width:800px;height:82px;background-color:#666666;margin:0px 0px 0px 0px; border-radius:30px; text-align:center;}
    #menu ul {margin:0px;padding:0px;}
    #menu ul li{ border-radius:0px;float:left;list-style:none;margin:0px 4px 0px 4px; width:191px; padding-top:30px; height:50px;background-color:#99CC00; position:relative;}
    #menu ul li a{ text-decoration: none !important;}
    #menu ul li:hover{display:inline;background-color:#CCCCCC;border-radius:0px;margin:0px 4px 0px 4px; width:191px; height:45px;}


    /* first select menu */

    ul.sub li{ background-color:#00CCFF; display:inline; }
    ul.sub li{margin:25px 0px 0px 0px; padding:0px 10px 0px 0px; position:absolute; }
    .hover ul.sub li{ display: block;position:relative;/*relative*/ float:none; margin:0px 0px 0px 29px;
    padding:3px 2px 2px 0px;  width:150px; height:20px;  }

    /* second select menu */
    .second li{ display:none;position:relative; float:none;  height:35px;
    margin:1px 0px 0px 8px;  padding:10px 0px 10px 0px;}
    .second li{ display: block; background-color:red; }
    .second{ position:relative; height:35px; margin:0px 0px 0px 4px;     padding:0px 0px 0px 0px;}

使用两个子菜单创建菜单

2 个答案: