<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav>
<ul class="dropdown">
<li class="drop"><a href="#">Really Tall Menu</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
<li><a href="#">Adipisci </a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
</ul>
</li>
<li class="drop"><a href="#">Kinda Tall Menu</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
</ul>
</li>
<li class="drop"><a href="#">Average Menu</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
</ul>
</li>
<li><a href="#">No Menu</a>
</li>
</ul>
</nav>
h2{
text-align: center;
font-weight: 100;
font-size: 50px;
margin-bottom: 20px;
margin-top: 20px;
background: blue;
color: white;
font-weight: 600;
opacity: 0.5;
padding: 10px;
border-radius: 15px;
}
nav{
width: 750px;
margin: 1em auto;
}
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.dropdown{
position: relative;
width: 100%;
}
ul.dropdown li{
font-weight: bold;
float: left;
width: 180px;
position: relative;
background: #ecf0f1;
}
ul.dropdown a:hover{
color: #000;
}
ul.dropdown li a {
display: block;
padding: 20px 8px;
color: #34495e;
position: relative;
z-index: 2000;
text-align: center;
text-decoration: none;
font-weight: 300;
}
ul.dropdown li a:hover,
ul.dropdown li a.hover{
background: #3498db;
position: relative;
color: #fff;
transition:0.5s ease;
}
ul.dropdown ul{
display: none;
position: absolute;
top: 0;
left: 0;
width: 180px;
z-index: 1000;
}
ul.dropdown ul li {
font-weight: normal;
background: #f6f6f6;
color: #000;
border-bottom: 1px solid #ccc;
}
ul.dropdown ul li a{
display: block;
color: #34495e !important;
background: #eee !important;
}
ul.dropdown ul li a:hover{
display: block;
background: #3498db !important;
color: #fff !important;
}
ul.dropdown ul li a:hover{
display: block;
background: #3498db;
color: #fff;
}
.drop > a{
position: relative;
}
.drop > a:after{
content: "";
position: absolute;
right: 11px;
top: 46%;
border-left: 10px solid transparent;
border-top: 10px solid #333;
border-right: 10px solid transparent;
z-index: 999;
}
.drop > a:hover:after{
content:"";
border-left: 10px solid transparent;
border-top: 10px solid #fff;
border-right: 10px solid transparent;
}
/*
*
* Credits to https://css-tricks.com/long-dropdowns-solution/
*
*/
var maxHeight = 400;
$(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 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");
});
});