I had a drop-down menu that was functioning well. However, when I made changes to allow scrolling for too many items, it started behaving differently.
The drop-down without scrolling doesn't move down, but the one with scrolling does.
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, // ensuring enough space at the bottom
multiplier = height / maxHeight; // moves faster if list is taller
// need to store original height here for reverting on mouseout
$container.data("origHeight", $container.height());
// maintains its rollover color while dropdown is open
$anchor.addClass("hover");
// ensures dropdown appears directly below parent list item
$list
.show()
.css({
paddingTop: $container.data("origHeight")
});
// no animation needed if list is shorter than max height
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);
// revert back to normal state
$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>