滚动下拉菜单推内容

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的高度，导致其余部分被击倒。你可能需要将你的UL下拉列表放在其他元素中，并设置高度，而不是绝对定位。