javascript - スクロール メニューと連動した CSS フライアウト メニュー

Question

私はJavaScriptが初めてで、メニューに問題があります。フライアウト メニューを動作させることができ、スクロール メニューを動作させることができます (スクロール メニューhttp://css-tricks.com/examples/LongDropdowns/のデモ)。

ただし、効果をマージする方法がわかりません。誰かが以下のフライアウト コードを手伝ってくれませんか?

//HTML

<ul class="dropdown">
<li><a href="#">CITIES BY STATE</a>
<ul>
for (var p = 0; p < state.length; p++) {

    <li><a href="#"> + states[p][0] + "</a>");

    <ul  id="city\" class="city">
    <li>CITY 1</li>
    <li>CITY 2</li>
    <li>CITY 3</li>
    </ul>");

    </li>");

}   
</ul>
</ul>
</li>

//リストのスクロールを許可するスクリプト

<script>
    var maxHeight = 600;

    $(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");


            // 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 })
            .show()
            .find("a")
            .removeClass("hover");    
        });                                      
    });                  
</script>

これは私が試したものですが、オフです。州にカーソルを合わせると、州リストの右側に都市のリストが表示されるようにします。

/*code to show/hide city menu*/

#city li:hover ul ul, #city li:hover ul ul ul, #city li:hover ul ul ul ul{
display:none;
}

#city li:hover ul, #city li li:hover ul, #city li li li:hover ul, #city li li li li:hover ul{
display:block;
}