Cách thêm danh mục cấp 3 vào danh sách thả xuống cuộn

Tôi đã thả xuống danh sách dài của danh mục con cũng bao gồm danh mục con cấp ba. tôi đã thêm bằng cách sử dụng tham chiếu thủ thuật css: https://css-tricks.com/long-dropdowns-solution/ bây giờ tôi không thể hiển thị danh mục cấp ba ... nó phải hiển thị bên cạnh danh mục con. cung cấp cho tôi hướng dẫn thích hợp

cho cấp thứ ba

        <script>
var maxHeight = 300;
var maxwidth
jQuery.noConflict();
jQuery(function(){

jQuery("li.level0").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level0"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.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
jQuerycontainer.data("origHeight", jQuerycontainer.height());

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

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

paddingTop: jQuerycontainer.data("origHeight"),
position:'absolute',
});

// don't do any animation if list shorter than max
if (multiplier > 1) {
jQuerycontainer
.css({
height: maxHeight,
overflow: "hidden",



})
.mousemove(function(e) {
var offset = jQuerycontainer.offset();
var relativeY = ((e.pageY - offset.top) * multiplier) - (jQuerycontainer.data("origHeight") * multiplier);
if (relativeY > jQuerycontainer.data("origHeight")) {
jQuerylist.css("top", -relativeY +jQuerycontainer.data("origHeight"));
};
});
}

}, function() {

var jQueryel = jQuery(this);

// put things back to normal
jQueryel
.height(jQuery(this).data("origHeight"))
.find("ul")
.css({ })
.hide()
.end()
.find("a")
.removeClass("hover");

})});
jQuery (function() {
jQuery("li.level1").hover(function() {

var jQuerycontainer = jQuery(this),
jQuerylist = jQuerycontainer.find("ul.level1"),
jQueryanchor = jQuerycontainer.find("a"),
height = jQuerylist.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
jQuerycontainer.data("origHeight", jQuerycontainer.height());

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

// make sure dropdown appears directly below parent list item
jQuerylist
.show()
.css({

//paddingTop: jQuerycontainer.data("origHeight"),
position:'relative',
clear:'both',
});

// don't do any animation if list shorter than max


}, function() {
var jQueryel = jQuery(this);

// put things back to normal
// jQueryel
// .height(jQuery(this).data("origHeight"))
// .find("ul")
// .css({ })
// .hide()
// .end()
// .find("a")
// .removeClass("hover");

})});

//Add down arrow only to menu items with submenus
// jQuery(".nav-primary > li:has('ul')").each(function() {
// jQuery(this).find("a:first").append("<img src='images/down-arrow.png' />");
// });
</script>
<style type="text/css">
ol.dropdown {
position: absolute;
width: 100%;
height: 60px;
}
ol.dropdown li {
background: none repeat scroll 0 0 #ccc;
float: left;
font-weight: bold;
position: relative;
width: 180px;
}
ol.dropdown a:hover {
color: #000;
}
ol.dropdown li a {
color: #222;
display: block;
padding: 20px 8px;
position: relative;
z-index: 904;
}
ol.dropdown li a:hover, ol.dropdown li a.hover {
background: none repeat scroll 0 0 #f3d673;
position: relative;
}
ol.dropdown ul {

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

display: none;
left: 10px;
background-color: #ffc;
/*right: 0;*/



width: 160px;
z-index: 903;
}
ol.dropdown ul li ul li {
background: none repeat scroll 0 0 #f6f6f6;
border-bottom: 1px solid #ffc;
color: #000;
font-weight: normal;
}
ol.dropdown ul li ul li a {
background: none repeat scroll 0 0 #eee !important;
display: block;
}
ol.dropdown ul li ul li a:hover {
background: none repeat scroll 0 0 #f3d673 !important;
display: block;
}

</style>