The jQuery overflow menu plugin creates a drop down menu to prevent the menu to overflow to the next line or when the number of menu items exceeds the given maximum. Check the demo for more information.
<html>
<body>
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
<link rel="stylesheet" href="assets/css/jquery.overflowmenu.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.overflowmenu.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.menu').overflowMenu();
});
</script>
$('.menu').overflowMenu({
// The maximum numbers of items before the menu will overflow. When the value is 0, the drop down menu will only show if the items overflow the menu.
maximumItems: 0,
// Outer element
element: 'div',
// Class and data- name
class: 'overflow-menu',
// Insert content before the menu
insertBefore: '',
// Insert content after the menu
insertAfter: ''
});