Question

我有一个下拉菜单，工作正常。如果在添加了太多项目时将其更改为允许滚动，那么就可以了。

没有滚动的下拉菜单不会将其向下推，但是滚动下拉菜单会这样做。

JS

var maxHeight = 300;

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

});   

});

CSS

/* ===== FIRST LEVEL ===== */
.dropdown{position: relative;   margin: 0 auto;float: right;top: 10px;font-size: 13px;}
.dropdown li {float: left; width: 155px; background-color:#373737; position: relative; border-bottom:1px solid #575757; border-top:1px solid #797979;}
.dropdown li a { display: block; padding: 10px 8px;color: #fff; position: relative; z-index: 2000; text-align:center; }
.dropdown li a:hover,
.dropdown li a.hover{background: #CF5C3F; position: relative; }
ul.dropdown > li:last-child {width: 50px;}
.contact{height: auto;}

/* ===== SECOND LEVEL */
ul.dropdown ul { display: none; position: absolute; top: 0; left: 0; width: 180px; z-index: 2; }
ul.dropdown ul li { font-weight: normal; background: #373737; color: #fff;}
ul.dropdown ul li a{ display: block; text-align:center; background-color: #373737!important;} 
ul.dropdown ul li a:hover{ display: block;background: #CF5C3F!important; }

HTML

<!-- Drop Down Menu -->
    <ul class="dropdown">
            <li><a id="page1" href="index.html">Home</a></li>
            <li><a href="#">Internet Architecture</a>
                <ul class="sub_menu">
                    <li><a href="pages/page1.html">Web Functionality </a></li>
                    <li><a href="pages/page2.html">TCP/IP</a></li>
                    <li><a href="pages/page3.html">DNS</a></li>
                    <li><a href="pages/page8.html">HTTP Requests</a></li>
                    <li><a href="pages/page9.html">SSL</a></li>
                    <li><a href="pages/page1.html">Web Functionality </a></li>
                    <li><a href="pages/page2.html">TCP/IP</a></li>
                    <li><a href="pages/page3.html">DNS</a></li>
                    <li><a href="pages/page8.html">HTTP Requests</a></li>
                    <li><a href="pages/page9.html">SSL</a></li>
                    <li><a href="pages/page2.html">TCP/IP</a></li>
                    <li><a href="pages/page3.html">DNS</a></li>
                    <li><a href="pages/page8.html">HTTP Requests</a></li>
                    <li><a href="pages/page9.html">SSL</a></li>
                </ul>
            </li>
            <li><a href="#">Internet Security</a>
                <ul class="sub_menu">
                    <li><a href="pages/page11.html">Laws</a></li>
                    <li><a href="pages/page10.html">Security Risks</a></li>
                </ul>
            </li>
            <li><a href="pages/page5.html">TCP/IP Layers</a>
            <li><a href="#">Website Performance</a>
                <ul class="sub_menu">
                    <li><a href="pages/page4.html">Client Side</a></li>
                    <li><a href="pages/page7.html">Vector vs Bitmap</a></li>
                    <li><a href="pages/page6.html">Server Side</a></li>
                </ul>
            </li>
            <li class="contact"><a style="padding: 0;" href="pages/contact.html"><img src="images/contact_white.png" width="33px" height="auto"></a></li>

    </ul>

Answer 1

你小提琴中JS的第28行是在父LI元素上设置一个高度。这会增加你的LI的高度，导致其余部分被撞倒。你可能需要将你的UL下拉包装在其他元素中，并在那些上设置高度以及绝对定位。

滚动下拉菜单会推送内容

1 个答案: