我对编程很陌生，我正在尝试实现一个长下拉菜单的解决方案，由Chris在CSS-tricks中创建。但是没有运气。这是我的代码。
li.dropdown:hover > ul.dropdown-cart{
min-width:350px;
display:block;
}
li.dropdown:hover > ul.dropdown-cart li .item{
display:block;
min-width:350px;
padding:3px 10px;
margin: 3px 0;
}
ul.dropdown-cart li .item:hover{
min-width:350px;
background-color:#f3f3f3;
}
ul.dropdown-cart li .item:after{
min-width:350px;
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.dropdown-cart li .item-left{
float:left;
}
ul.dropdown-cart li .item-left img,
ul.dropdown-cart li .item-left span.item-info{
float:left;
}
ul.dropdown-cart li .item-left span.item-info{
margin-left:10px;
}
ul.dropdown-cart li .item-left span.item-info span{
display:block;
}
ul.dropdown-cart li .item-right{
float:right;
}
ul.dropdown-cart li .item-right button{
margin-top:14px;
}
ul.dropdown-cart li .item-right1{
text-align: right;
}
这是我的HTML
<ul style="list-style-type:none">
<div class="cart box_1">
<a href="checkout.html">
<a href="cart.php"><li class="dropdown" > <img src="images/cart.png" alt="" style="padding-top: 6px"/> <div class="numberCircle"><?=$item_count?></div></a>
<ul class="dropdown-menu dropdown-cart dropdown-menu-right" role="menu">
<li class="divider"></li>
<li><a class="text-center" style="font-weight: bold;">Cart is empty!</a></li>
</ul>
这是实现的js代码
var maxHeight = 400;
$(function(){
$(".dropdown-cart > 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");
});
});