<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 ---------->
<ul class="menu">
<li class="menu-item">
<a href="#">1964–1973</a>
<div class="submenu-wrapper">
<button class="submenu-close">Close</button>
<div class="submenu-title"><span class="year-group">1964–1973</span> Mustang</div>
<ul class="submenu">
<li class="menu-item">
<a href="www.google.com">Accessories</a>
<ul class="subsubmenu">
<li class="menu-item">
<a href="/Category/Accessories/Banners.aspx">Banners</a>
</li>
<li class="menu-item">
<a href="/Category/Accessories/Bronco License Plate Bracket.aspx">Bronco License Plate Bracket</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="/Category/Apparel.aspx">Apparel</a>
<ul class="subsubmenu">
<li class="menu-item"><a href="#">Stang-Aholics T-Shirt</a></li>
</ul>
</li>
<li class="menu-item">
<a href="/Category.aspx?&RootCat=Audio%20%26%20Electronics">Audio & Electronics</a>
<ul class="subsubmenu">
<li class="menu-item"><a href="#">Antenna Base Cover</a></li>
<li class="menu-item"><a href="#">Antennas</a></li>
<li class="menu-item"><a href="#">Stereo Adapter, USB Flash</a></li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
@charset "UTF-8";
html {
font-family: sans-serif;
line-height: 1.5;
}
body {
max-width: 60em;
margin: 0 auto;
}
.menu, .submenu {
position: relative;
}
.menu, .submenu, .subsubmenu {
list-style: none;
margin: 0;
padding: 0;
}
.menu, .submenu-wrapper {
padding: 0.25em;
background: #aaa;
}
.menu-item > a {
display: block;
background: #ddd;
padding: 0.25em 0.5em;
text-decoration: none;
color: inherit;
}
.menu > .menu-item {
display: inline-block;
}
.menu > .menu-item > a {
position: relative;
}
.menu > .menu-item > a:hover, .menu > .menu-item > a:focus {
background: #e0c7c7;
}
.menu > .menu-item .submenu-wrapper {
display: none;
}
.menu > .menu-item.open > a:after {
content: "";
display: block;
position: absolute;
top: 100%;
left: 1em;
margin-top: 0.25em;
width: 0;
height: 0;
margin-right: -100%;
border-style: solid;
border-color: transparent;
border-bottom-color: #aaa;
border-width: 0.25em 0.75em 0.75em;
}
.menu > .menu-item.open .submenu-wrapper {
display: block;
}
.submenu-wrapper {
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20em;
margin-top: 1em;
}
.csstransitions .submenu-wrapper {
opacity: 1;
}
.submenu-wrapper:before {
content: "";
position: absolute;
bottom: 100%;
width: 100%;
height: 1.5em;
}
.csstransitions .submenu-wrapper.hiding {
opacity: 0;
transition: opacity 750ms cubic-bezier(1, 0, 1, 1);
}
.submenu-title {
margin: 0 0.25em;
font-weight: bold;
}
.submenu-close {
background: transparent;
border: none;
width: 1em;
height: 1em;
position: absolute;
top: 0.25em;
right: 0.25em;
text-indent: 1em;
padding: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
font-size: inherit;
cursor: pointer;
}
.submenu-close:before {
content: "×";
display: block;
width: 1em;
height: 1em;
text-align: center;
text-indent: 0;
}
.submenu {
position: absolute;
top: 1.75em;
left: 0.25em;
bottom: 0.25em;
padding: 0;
right: 67%;
margin-right: 0.125em;
overflow-y: auto;
overflow-x: hidden;
}
.submenu > .menu-item {
display: block;
}
.submenu > .menu-item > a:after {
content: ">";
float: right;
}
.submenu-wrapper > .subsubmenu {
position: absolute;
overflow-x: hidden;
overflow-y: auto;
top: 1.75em;
left: 33%;
right: 0.25em;
bottom: 0.25em;
margin-left: 0.125em;
}
.submenu .subsubmenu {
display: none;
}
var uid = (function(){var id=0;return function(){if(arguments[0]===0)id=0;return id++;}})();
$(function() {
var $submenu = $('.submenu-wrapper'),
$menuItems = $('.menu > .menu-item');
$menuItems.each(function() {
var $this = $(this),
yearGroup = $('> a', $this).text();
if (!$this.has('.submenu-wrapper').length) {
$submenu.clone().appendTo($this).find('.year-group').text(yearGroup);
}
});
var $menuLinks = $('> a', $menuItems),
$submenuLinks = $('.submenu > .menu-item > a'),
openSubmenu = { $element: null, timeout: null };
$('.submenu-close').on('click', function() {
hideSubmenu($(this).closest('.menu-item'), true);
});
$menuItems.on('mouseenter', function() { showSubmenu($(this)); }).on('mouseleave', function() { hideSubmenu($(this)); });
$menuLinks.on('focus', function() { showSubmenu($(this).closest('.menu-item')); });
$submenuLinks.on('mouseenter', function() {
var $this = $(this),
$parent = $this.closest('.menu-item');
$submenuWrapper = $this.closest('.submenu-wrapper'),
$subsubmenu = $('+ .subsubmenu', $this),
$existingSubSubMenu = $('> .subsubmenu', $submenuWrapper);
$this.addClass('open');
if ($existingSubSubMenu.length && $existingSubSubMenu.attr('data-submenu') !== $parent.attr('data-submenu')) {
reattachSubSubMenu($existingSubSubMenu);
}
if (!$parent.attr('data-submenu')) {
var submenuID = uid();
$parent.attr('data-submenu', submenuID);
$subsubmenu.attr('data-submenu', submenuID);
}
$submenuWrapper.append($subsubmenu);
});
function reattachSubSubMenu($menu) {
var subMenuID = $menu.attr('data-submenu'),
$subMenu = $('.menu-item[data-submenu=' + subMenuID + ']');
$subMenu.append($menu);
}
function showSubmenu($menuItem, immediate) {
if (immediate === undefined) immediate = true;
setTimeout(function() {
if (openSubmenu.timeout)
clearTimeout(openSubmenu.timeout);
$menuItems.filter('.open').not($menuItem).each(function() {
hideSubmenu($(this), true);
});
$menuItem.addClass('open');
$('.submenu-wrapper', $menuItem).removeClass('hiding');
}, immediate ? 0 : 750);
}
function hideSubmenu($menuItem, immediate) {
if (immediate === undefined) immediate = false;
var $submenuWrapper = $menuItem.find('.submenu-wrapper');
$submenuWrapper.addClass('hiding');
openSubmenu.timeout = setTimeout(function() {
if (openSubmenu.timeout)
clearTimeout(openSubmenu.timeout);
$menuItem.removeClass('open');
$submenuWrapper.removeClass('hiding');
reattachSubSubMenu($('> .subsubmenu', $submenuWrapper), $menuItem);
}, immediate ? 0 : 750);
}
});
