<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 ----------> <link href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <div class="menu-container"> <div class="menu"> <a href="#" class="logo">Logo</a> <ul class="clearfix"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">School</a> <ul> <li><a href="#">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Research</a> <ul> <li><a href="#">Undergraduate research</a></li> <li><a href="#">Masters research</a></li> <li><a href="#">Funding</a></li> </ul> </li> <li><a href="#">Something</a> <ul> <li><img src="https://placeimg.com/300/200/nature"></li> </ul> </li> </ul> </li> <li><a href="#">News</a> <ul> <li><a href="#">Today</a></li> <li><a href="#">Calendar</a></li> <li><a href="#">Sport</a></li> </ul> </li> <li><a href="#">Contact</a> <ul> <li><a href="#">School</a> <ul> <li><a href="#">Lidership</a></li> <li><a href="#">History</a></li> <li><a href="#">Locations</a></li> <li><a href="#">Careers</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Study</a> <ul> <li><a href="#">Undergraduate</a></li> <li><a href="#">Masters</a></li> <li><a href="#">International</a></li> <li><a href="#">Online</a></li> </ul> </li> <li><a href="#">Empty sub</a> <ul> <li><img src="https://placeimg.com/300/200/people"></li> </ul> </li> </ul> </li> </ul> </div> </div>

body { font-family: 'Source Sans Pro', sans-serif; } * { box-sizing: border-box; } a { color: #333; } .menu { width: 100%; } .menu-container { margin: 0 auto; background: #e9e9e9; } .menu a.logo { display: inline-block; padding: 1.5em 3em; width: 19%; float: left; } .menu img { max-width: 100%; } .menu-mobile { display: none; padding: 20px; } .menu-mobile:after { content: "\f394"; font-family: "Ionicons"; font-size: 2.5rem; padding: 0; float: right; position: relative; top: 50%; -webkit-transform: translateY(-25%); transform: translateY(-25%); } .menu-dropdown-icon:before { content: "\f489"; font-family: "Ionicons"; display: none; cursor: pointer; float: right; padding: 1.5em 2em; background: #fff; color: #333; } .menu > ul { margin: 0 auto; width: 80%; list-style: none; padding: 0; position: relative; /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */ box-sizing: border-box; clear: right; } .menu > ul:before, .menu > ul:after { content: ""; display: table; } .menu > ul:after { clear: both; } .menu > ul > li { float: left; background: #e9e9e9; padding: 0; margin: 0; } .menu > ul > li a { text-decoration: none; padding: 1.5em 3em; display: block; } .menu > ul > li:hover { background: #f0f0f0; } .menu > ul > li > ul { display: none; width: 100%; background: #f0f0f0; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul:before, .menu > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li { margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left; } .menu > ul > li > ul > li a { color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc; } .menu > ul > li > ul > li a:hover{ color:#03a9f4; } .menu > ul > li > ul > li > ul { display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box; } .menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after { content: ""; display: table; } .menu > ul > li > ul > li > ul:after { clear: both; } .menu > ul > li > ul > li > ul > li { float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em; } .menu > ul > li > ul > li > ul > li a { border: 0; font-size: 14px; } .menu > ul > li > ul.normal-sub { width: 300px; left: auto; padding: 10px 20px; } .menu > ul > li > ul.normal-sub > li { width: 100%; } .menu > ul > li > ul.normal-sub > li a { border: 0; padding: 1em 0; } /* –––––––––––––––––––––––––––––––––––––––––––––––––– Mobile style's –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media only screen and (max-width: 959px) { .menu-container { width: 100%; } .menu-container .menu{ display:inline-block; } .menu-mobile { display: block; float: right; padding: 20px 20px 0; } .menu-dropdown-icon:before { display: block; } .menu > ul { display: none; width:100%; } .menu > ul > li { width: 100%; float: none; display: block; } .menu > ul > li a { padding: 1.5em; width: 100%; display: block; } .menu > ul > li > ul { position: relative; padding: 0 40px; } .menu > ul > li > ul.normal-sub { width: 100%; } .menu > ul > li > ul > li { float: none; width: 100%; margin-top: 20px; } .menu > ul > li > ul > li:first-child { margin: 0; } .menu > ul > li > ul > li > ul { position: relative; } .menu > ul > li > ul > li > ul > li { float: none; } .menu .show-on-mobile { display: block; } }

$(document).ready(function() { "use strict"; $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon'); $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub'); $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\"> </a>"); $(".menu > ul > li").hover(function(e) { if ($(window).width() > 943) { $(this).children("ul").stop(true, false).fadeToggle(150); e.preventDefault(); } }); $(".menu > ul > li").click(function() { if ($(window).width() <= 943) { $(this).children("ul").fadeToggle(150); } }); $(".menu-mobile").click(function(e) { $(".menu > ul").toggleClass('show-on-mobile'); e.preventDefault(); }); }); $(window).resize(function() { $(".menu > ul > li").children("ul").hide(); $(".menu > ul").removeClass('show-on-mobile'); });