我正在尝试使用这个名为：Very Long Dropdown Menu的菜单 . ：[::: link :::]

菜单代码如下：

身体：

<ul class="dropdown">
    <li>
        <a href="#">Really Tall Menu</a>
        <ul class="sub_menu">
            <li><a href="#">Artificial Turf</a></li>
            <li><a href="#">Foul Poles</a></li>
            <li><a href="#">Scoreboards</a></li>
            <li><a href="#">Shade Structures</a></li>
        </ul>
    </li>
    <li>
        <a href="#">No Menu</a>
    </li>
</ul>

CSS：

/* 
    LEVEL ONE
*/

ul.dropdown {
    position: relative;
    width: 100%;
}
ul.dropdown li {
    font-weight: bold;
    float: left;
    width: 180px;
    background: #ccc;
    position: relative;
}
ul.dropdown a:hover {
    color: #000;
}
ul.dropdown li a {
    display: block;
    padding: 20px 8px;
    color: #222;
    position: relative;
    z-index: 2000;
}
ul.dropdown li a:hover,
ul.dropdown li a.hover {
    background: #F3D673;
    position: relative;
}

/* 
    LEVEL TWO
*/

ul.dropdown ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    z-index: 1000;
}
ul.dropdown ul li {
    font-weight: normal;
    background: #f6f6f6;
    color: #000;
    border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a {
    display: block;
    background: #eee !important;
}
ul.dropdown ul li a:hover {
    display: block;
    background: #F3D673 !important;
}

Javascript / Jquery：

var maxHeight = 400;

$(function() {

    $(".dropdown > li").hover(function() {

        var $container = $(this),
            $list = $container.find("ul"),
            $anchor = $container.find("a"),
            height = $list.height() * 1.1, // make sure there is enough room at the bottom
            multiplier = height / maxHeight; // needs to move faster if list is taller

        // need to save height here so it can revert on mouseout            
        $container.data("origHeight", $container.height());

        // so it can retain it's rollover color all the while the dropdown is open
        $anchor.addClass("hover");

        // make sure dropdown appears directly below parent list item    
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });

        // don't do any animation if list shorter than max
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }

    }, function() {

        var $el = $(this);

        // put things back to normal
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({
                top: 0
            })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");

    });

    // Add down arrow only to menu items with submenus
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });

});

.................................................. ..........................

这是一个可滚动的菜单，并编码为在用户滚动时自动滚动或将鼠标悬停在下方以查看子菜单的内容 .

我正在尝试将子菜单>子类别添加到此菜单中 . 例如，在滚动菜单时，此菜单中每个列出的项目是否都有子菜单？我总共只需要三个级别的子菜单 . 目前它是两个包括顶部导航..：1 . 顶部导航（显示为默认）2 . 子菜单（在顶部导航时悬停显示（并且可滚动）.3 . 子类别（任何菜单项时应显示）在“子菜单”中徘徊或点击 .

这个插件/脚本可以吗？

这是我试图做的事情，但是我的尝试无法实现......：

<ul class="dropdown">
    <li>
        <a href="#">Really Tall Menu</a>
        <ul class="sub_menu">
             <li>
                 <a href="#">Submenu Artificial tarf</a>
                 <ul class="sub_menu">
                     <li><a href="#">1</a></li>
                     <li><a href="#">2 Fencing &amp; Windscreen</a></li>
                     <li><a href="#">7 Outdoor Signs</a></li>
                     <li><a href="#">8 Padding</a></li>
                 </ul>
             </li>
             <li><a href="#">Foul Poles</a></li>
             <li><a href="#">Scoreboards</a></li>
             <li><a href="#">Shade Structures</a></li>
        </ul>
    </li>
    <li>
        <a href="#">No Menu</a>
    </li>
</ul>

也在codepen.io上找到了这个：http://codepen.io/larrygeams/pen/feoDc

有人可以提供任何帮助吗？

谢谢 .

jquery html css