Centering nav menu breaks dropdown sub-menu's
Question
I'm having a tough time figuring out how to center this nav menu without breaking the drop-down li elements.
My demo: http://jsbin.com/tosayosino/1/edit?html,css,js,output
Removing the float:left; from .jetmenu li works and centers the menu, but then there are problems when popping out of mobile mode back into desktop mode (the menu stays stacked instead of floating the li elements horizontally.
Using position:relative; and then left:50%; and right:50%; for the div and ul works to center things too, but then the drop-down menu is constrained to the width of the menu item name and squashes all the sub-categories together (I want the drop-down to be full page-width).
My HTML:
<nav class="hz-cats-menu">
<ul class="jetmenu blue">
<li>
<a href="view_category.asp?cat=CATID">CATEGORY</a>
<div class="megamenu full-width text-center">
<div class="row">
<a href="view_category.asp?cat=CATID"><div class="col1">CATEGORY</div></a>
</div>
</div>
</li>
<li>
<a href="view_category.asp?cat=CATID">CATEGORY</a>
<div class="megamenu full-width text-center">
<div class="row">
<a href="view_category.asp?cat=CATID"><div class="col1">CATEGORY</div></a>
</div>
</div>
</li>
<li>
<a href="view_category.asp?cat=CATID">CATEGORY</a>
<div class="megamenu full-width text-center">
<div class="row">
<a href="view_category.asp?cat=CATID"><div class="col1">CATEGORY</div></a>
</div>
</div>
</li>
</ul>
</nav>
My CSS:
/*
NAME: Jet Responsive Megamenu
AUTHOR PAGE: http://codecanyon.net/user/marcoarib
ITEM PAGE: http://codecanyon.net/item/jet-responsive-megamenu/5719593
*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import "font-awesome.css";
/* MENU CONFIGURATION
**********************************************************/
.jetmenu{
width: 100%;
padding: 0;
margin: 0;
position: relative;
float: left;
list-style: none;
background: #333333;
line-height: 1;
}
.jetmenu li{
display: inline-block;
float: left;
}
.jetmenu a{
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
outline: none;
z-index: 10;
}
.jetmenu > li > a{
padding: 10px 25px;
font-family: 'Open Sans', sans-serif;
font-size: 1.5em;
color: #fff;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-weight: bold;
}
.jetmenu > li:hover > a,
.jetmenu > li.active > a{
background: #e0e0e0;
color: #555;
}
/* DROPDOWN CONFIGURATION
**********************************************************/
.jetmenu ul.dropdown,
.jetmenu ul.dropdown li ul.dropdown {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
z-index: 99;
min-width: 134px;
background: #333333;
}
.jetmenu ul.dropdown{
top: 60px;
}
.jetmenu ul.dropdown li ul.dropdown{
left: 100%;
top: inherit;
}
.jetmenu ul.dropdown li{
clear:both;
width:100%;
font-size: 12px;
}
.jetmenu ul.dropdown li a{
width:100%;
padding: 12px 24px 12px;
display:inline-block;
float:left;
clear:both;
font-family: 'Open Sans', sans-serif;
text-decoration: none;
color: #999;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.jetmenu ul.dropdown li:hover > a{
background: #e0e0e0;
color: #555;
}
/* dropdowns to left side */
.jetmenu ul.dropdown li ul.dropdown.left{
left: auto;
right: 100%;
}
/* SUBMENU INDICATORS
**********************************************************/
.jetmenu .indicator{
position: relative;
left: 5px;
top: 0;
font-size: 14px;
float: right;
}
.jetmenu ul li .indicator{
font-size: 12px;
top: 1px;
left: 10px;
}
/* MEGAMENU
**********************************************************/
.jetmenu > li > .megamenu{
position: absolute;
display: none;
background: #fff;
width: 25%;
/* top: 60px; */
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #999;
z-index: 99;
padding: 20px 30px 20px;
border: 1px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* megamenu list */
.jetmenu li > .megamenu ul{
margin: 0 0 20px 0;
float: left;
padding: 0;
display: block;
position: relative;
}
.jetmenu li > .megamenu ul li{
width: 100%;
padding: 4px 0;
}
.jetmenu li > .megamenu ul li.title{
margin: 0 0 8px;
padding: 0 0 5px;
font-size: 14px;
border-bottom: solid 1px #666;
}
/* megamenu h5 */
.jetmenu li > .megamenu h5{
width: 100%;
margin: 0;
padding: 0;
}
/* megamenu links */
.jetmenu li > .megamenu a{
color: #999;
text-decoration: none;
font-size: 12px;
-webkit-transition: color 0.3s linear;
-moz-transition: color 0.3s linear;
-o-transition: color 0.3s linear;
transition: color 0.3s linear;
}
.jetmenu li > .megamenu a:hover{
color: #dedede;
}
/* megamenu images */
.jetmenu .megamenu img{
width: 100%;
-webkit-transition: border 0.3s linear;
-moz-transition: border 0.3s linear;
-o-transition: border 0.3s linear;
transition: border 0.3s linear;
}
/* to fix right attribute on submenus (menu aligned to left (default)) */
.jetmenu > li.fix-sub > .megamenu,
.jetmenu > li.fix-sub > .megamenu.half-width,
.jetmenu > li.fix-sub > .dropdown{
right: 0;
}
/* MEGAMENU WIDTHS
**********************************************************/
.jetmenu > li > .megamenu.half-width{
width: 50%;
}
.jetmenu > li > .megamenu.full-width{
width: 100%;
left: 0;
}
/* MEGAMENU FORM CONFIGURATION
**********************************************************/
.jetmenu li > .megamenu form{
width: 100%;
}
/* megamenu inputs */
.jetmenu li > .megamenu form input[type="text"],
.jetmenu li > .megamenu form textarea{
padding: 5px;
color: #999;
background: #444;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
border: solid 1px transparent;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: border 0.3s linear;
-moz-transition: border 0.3s linear;
-o-transition: border 0.3s linear;
transition: border 0.3s linear;
}
.jetmenu li > .megamenu form input[type="text"]:focus,
.jetmenu li > .megamenu form textarea:focus{
border-color: #e0e0e0;
}
.jetmenu li > .megamenu form input[type="text"]{
width: 100%;
margin-top: 10px;
}
.jetmenu li > .megamenu form textarea{
width: 100%;
margin-top: 10px;
}
.jetmenu li > .megamenu form input[type="submit"]{
width: 25%;
float: right;
height: 30px;
margin-top: 10px;
border: none;
cursor: pointer;
background: #444;
color: #777;
font-family: 'Open Sans', sans-serif;
-webkit-transition: background 0.3s linear;
-moz-transition: background 0.3s linear;
-o-transition: background 0.3s linear;
transition: background 0.3s linear;
}
.jetmenu li > .megamenu form input[type="submit"]:hover{
background: #e0e0e0;
color: #555;
}
/* MEGAMENU GRID SYSTEM
**********************************************************/
.megamenu .row{
width: 100%;
margin-top: 15px;
}
.megamenu .row:first-child {
margin-top: 0;
}
.megamenu .row:before,
.megamenu .row:after {
display: table;
content: "";
line-height: 0;
}
.megamenu .row:after {
clear: both;
}
.megamenu .row .col1,
.megamenu .row .col2,
.megamenu .row .col3,
.megamenu .row .col4,
.megamenu .row .col5,
.megamenu .row .col6{
display: block;
width: 100%;
min-height: 20px;
float: left;
font-size: 1.4em;
<!--margin-left: 2.127659574468085%;-->
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
}
.megamenu .row [class*="col"]:first-child {
margin-left: 0;
}
.megamenu .row .col1{
width: 14.893617021276595%;
}
.megamenu .row .col2{
width: 31.914893617021278%;
}
.megamenu .row .col3{
width: 48.93617021276595%;
}
.megamenu .row .col4{
width: 65.95744680851064%;
}
.megamenu .row .col5{
width: 82.97872340425532%;
}
.megamenu .row .col6{
width: 100%;
}
div.col2:hover {
background-color: #02b8fa;
}
div.col1:hover {
color: #888;
background-color: #e7ecf5;/*#7291ca;*/
}
a.q7 {
font-size: 1.4em;
width:100%;
height:100%;
padding: 25px;
}
a.q7:hover {
/*background-color:#02b8fa;*/
}
span.q7 {
font-size: 1.4em;
display:block;
width:100%;
height:100%;
}
span:q7:hover {
/*background-color: #02b8fa;*/
}
/* RIGHT ALIGNMENT (MENU ITEM)
**********************************************************/
.jetmenu > li.right{
float: right;
}
.jetmenu > li.right > .megamenu,
.jetmenu > li.right > .megamenu.half-width,
.jetmenu > li.right > .dropdown{
right: 0;
}
/* to fix right attribute on submenus (menu aligned to right) */
.jetmenu > li.jsright{
float: right;
}
.jetmenu > li.jsright.last > .megamenu,
.jetmenu > li.jsright.last > .megamenu.half-width,
.jetmenu > li.jsright.last > .dropdown{
right: 0;
}
/* ICONS (FONT AWESOME)
**********************************************************/
.jetmenu > li > a > i{
line-height: 23px !important;
margin-right: 6px;
font-size: 18px;
float: left;
}
/* COLLAPSIBLE MENU
**********************************************************/
.jetmenu > li.showhide{
display: none;
width: 100%;
height: 50px;
cursor: pointer;
color: #999;
background: #333;
}
.jetmenu > li.showhide span.title{
margin: 15px 0 0 25px;
font-family: 'Open Sans', sans-serif;
float: left;
}
.jetmenu > li.showhide span.icon{
margin: 17px 20px;
float: right;
}
.jetmenu > li.showhide .icon em{
margin-bottom: 3px;
display: block;
width: 20px;
height: 2px;
background: #999;
}
/* STYLES
**********************************************************/
/* blue */
.blue > li:hover > a, .blue > li.active > a{ background: #2e67b1; color: #fff; }
.blue ul.dropdown li:hover > a{ background: #2e67b1; color: #fff; }
.blue li > .megamenu form input[type="text"]:focus, .blue li > .megamenu form textarea:focus{ border-color: #2e67b1; }
.blue li > .megamenu form input[type="submit"]:hover{ background: #2e67b1; color: #fff; }
.blue li > .megamenu a:hover{ color: #FFF;/*#333333;*//*#02b8fa;*/ }
/* RESPONSIVE LAYOUT
**********************************************************/
@media (max-width: 768px) {
.jetmenu > li{
display: block;
width: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.jetmenu > li > a{
padding: 15px 25px;
}
.jetmenu a{
width: 100%;
background: #333;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.jetmenu ul.dropdown,
.jetmenu ul.dropdown li ul.dropdown{
width: 100% !important;
left: 0;
position: static !important;
border: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.jetmenu ul.dropdown li {
background: #fff !important;
border: none;
}
.jetmenu ul.dropdown > li > a{
padding-left: 40px !important;
}
.jetmenu > li > .megamenu{
width: 100% !important;
position: static;
border-top: none;
}
.jetmenu > li > .megamenu .row [class*="col"]{
float: none;
display: block;
width: 100% !important;
margin-left: 0;
margin-top: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.jetmenu > li > .megamenu .row:first-child [class*="col"]:first-child {
margin-top: 0;
}
.jetmenu > li > .megamenu .row{
margin-top: 0;
}
.jetmenu > li > ul.dropdown > li > a{ padding-left: 40px !important; }
.jetmenu > li > ul.dropdown > li > ul.dropdown > li > a{ padding-left: 60px !important; }
.jetmenu > li > ul.dropdown > li > ul.dropdown > li > ul.dropdown > li > a{ padding-left: 80px !important; }
}
@media (min-width: 768px) and (max-width: 900px) {
.jetmenu > li > .megamenu{
width: 100% !important;
left: 0 !important;
}
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #3e343c;
background: #efeeeb, #ffffff, #efeeeb, #ffffff;
font-weight: 400;
padding: 0;
margin: 0;
background: #efeeeb, #ffffff, #efeeeb, #ffffff;
max-width: 100%;
min-width: 320px;
overflow-x: hidden;
}
A.menu {
color: #3b3239;
font-size: 12px;
font-style: normal;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
padding: 5px;
}
/*A:menu:over:: When a user passes their mouses over them.*/
A.menu:hover {
color: #fbf9f2;
background: #5a2149;
text-decoration: none;
}
/*A:menu-bottom:: Controls the way the Links in the footer display before a user clicks or mouses over on them.*/
A.menu-bottom {
color: #3e343c;
font-size: 16px;
font-style: normal;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
}
/*A:menu-bottom:over:: When a user passes their mouses over them.*/
A.menu-bottom:hover {
color: #ccc;
text-decoration: none;
}
ul#menu-bottom {
width: 300px;
height: 125px;
float: left;
}
li#menu-bottom {
width: 150px;
line-height: 20px;
list-style: none;
float: left;
}
/*A:: Controls the way the all Links without an associated style display before a user clicks or mouses over them.*/
A {
color: #3e343c;
font-size: 14px;
font-style: normal;
text-decoration: none;
font-weight: 400;
}
/*A:hover:: When a user passes their mouse over them.*/
A:hover {
color: #5a2149;
text-decoration: underline;
}
#mainContent #home {
display: block;
margin: 0 auto;
max-width: 1200px !important;
padding:10px 0 0;
}
.accent-color {
color: #5a2149;
}
.accent-bg-color {
background: #e2e2e2;
color: #000;
}
#mainContainer {
margin: 0 auto;
padding: 0;
position: relative;
width: 100%;
}
#mainContainer .wrapper { max-width:1200px; margin:0 auto;}
nav {
-webkit-box-shadow: 0px 3px 2px #cecece;
-moz-box-shadow: 0px 3px 2px #cecece;
box-shadow: 0px 3px 2px #cecece;
z-index:999;
position:relative;
}
nav ul {
list-style: none;
text-align: center;
/*line-height: 49px;*/
padding: 0;
margin: 0;
}
nav li {
display: inline-block;
*display: inline;
zoom: 1;
}
#mainContent {
float: left;
margin:0 auto;
width:100% !important;
}
ul#desktopMenu {
margin: 0 auto;
max-height: 50px;
max-width: 1200px;
overflow: hidden;
padding: 0 0 15px;
list-style:none;
position:relative;
}
ul#desktopMenu li {
border-right:1px solid #ccc;
position: relative;
}
ul#desktopMenu li:last-child { border-right:none;}
ul#desktopMenu li:hover {
background: #FFF;
}
ul#desktopMenu li a {
display: block;
padding: 0 20px;
}
ul#desktopMenu li a:hover {
color: #fff;
text-decoration: none;
}
ul#desktopMenu li ul {
display: none;
position: fixed;
/*top: 222px;*/
/*border: 1px solid #EEE;*/
background: #ffffff ;
text-align: left;
padding: 10px;
margin-left: -12px;
width: 250px;
z-index: 99999;
-webkit-box-shadow: 0px 2px 2px #666;
-moz-box-shadow: 0px 2px 2px #666;
box-shadow: 0px 2px 2px #666;
}
ul#desktopMenu li:hover ul {
display: block;
}
ul#desktopMenu li ul li {
margin: 0;
padding: 0;
float: left;
display: block;
width: 100%;
border:none !important;
}
ul#desktopMenu li ul li a:hover {
color: #fff;
background: #f15a29;
}
ul#desktopMenu li ul li a {
color: #333;
text-transform: none;
font-weight: normal;
padding: 0 10px;
display: block;
font-size:14px;
}
ul#desktopMenu li ul li:hover {
background: #fcfcfc ;
}
My JQuery:
/*
NAME: Jet Responsive Megamenu
AUTHOR PAGE: http://codecanyon.net/user/marcoarib
ITEM PAGE: http://codecanyon.net/item/jet-responsive-megamenu/5719593
*/
(function($){
jQuery.fn.jetmenu = function(options){
var settings = {
indicator: true,
speed: 300,
delay: 0,
hideDelay: 0,
hideClickOut: true,
align: "left",
submenuTrigger: "hover",
scrollable: true,
scrollableMaxHeight: 400
}
$.extend( settings, options );
var menu = $(".jetmenu");
$(menu).wrap("<div class='jetmenu-wrapper'></div>");
var menuWrapper = $(".jetmenu-wrapper");
var lastScreenWidth = windowWidth();
var bigScreen = false;
$(menu).prepend("<li class='showhide'><span class='title'>MENU</span><span class='icon'><em></em><em></em><em></em><em></em></span></li>");
if(settings.indicator == true){
$(menu).find("a").each(function(){
if($(this).siblings(".dropdown, .megamenu").length > 0){
$(this).append("<span class='indicator'>+</span>");
}
});
}
screenSize();
$(window).resize(function() {
if(lastScreenWidth <= 768 && windowWidth() > 768){
unbindEvents();
hideCollapse();
bindHover();
if(settings.align == "right" && bigScreen == false){
rightAlignMenu();
bigScreen = true;
}
}
if(lastScreenWidth > 768 && windowWidth() <= 768){
unbindEvents();
showCollapse();
bindClick();
if(bigScreen == true){
rightAlignMenu();
bigScreen = false;
}
}
if(settings.align == "right"){
if(lastScreenWidth > 768 && windowWidth() > 768)
fixSubmenuRight();
}
else{
if(lastScreenWidth > 768 && windowWidth() > 768)
fixSubmenuLeft();
}
lastScreenWidth = windowWidth();
});
function screenSize(){
if(windowWidth() <= 768){
showCollapse();
bindClick();
if(bigScreen == true){
rightAlignMenu();
bigScreen = false;
}
}
else{
hideCollapse();
bindHover();
if(settings.align == "right"){
rightAlignMenu();
bigScreen = true;
}
else{
fixSubmenuLeft();
}
}
}
function bindHover(){
if (navigator.userAgent.match(/Mobi/i) || window.navigator.msMaxTouchPoints > 0 || settings.submenuTrigger == "click"){
$(menu).find("a").on("click touchstart", function(e){
e.stopPropagation();
e.preventDefault();
$(this).parent("li").siblings("li").find(".dropdown, .megamenu").stop(true, true).fadeOut(settings.speed);
if($(this).siblings(".dropdown, .megamenu").css("display") == "none"){
$(this).siblings(".dropdown, .megamenu").stop(true, true).delay(settings.delay).fadeIn(settings.speed);
return false;
}
else{
$(this).siblings(".dropdown, .megamenu").stop(true, true).fadeOut(settings.speed);
$(this).siblings(".dropdown").find(".dropdown").stop(true, true).fadeOut(settings.speed);
}
if($(this).attr("target") == "_blank" || $(this).attr("target") == "blank"){
window.open($(this).attr("href"));
}
else{
window.location.href = $(this).attr("href");
}
});
$(menu).find("li").bind("mouseleave", function(){
$(this).children(".dropdown, .megamenu").stop(true, true).fadeOut(settings.speed);
});
if(settings.hideClickOut == true){
$(document).bind("click.menu touchstart.menu", function(ev){
if($(ev.target).closest(menu).length == 0){
$(menu).find(".dropdown, .megamenu").fadeOut(settings.speed);
}
});
}
}
else{
$(menu).find("li").bind("mouseenter", function() {
$(this).addClass('active');
$(this).children(".dropdown, .megamenu").stop(true, true).delay(settings.delay).fadeIn(settings.speed);
}).bind("mouseleave", function() {
$(this).removeClass('active');
$(this).children(".dropdown, .megamenu").stop(true, true).delay(settings.hideDelay).fadeOut(settings.speed);
});
}
}
function bindClick(){
$(menu).find("li:not(.showhide)").each(function(){
if($(this).children(".dropdown, .megamenu").length > 0){
$(this).children("a").bind("click", function(e){
if($(this).siblings(".dropdown, .megamenu").css("display") == "none"){
$(this).siblings(".dropdown, .megamenu").delay(settings.delay).slideDown(settings.speed).focus();
$(this).parent("li").siblings("li").find(".dropdown, .megamenu").slideUp(settings.speed);
return false;
}
else{
$(this).siblings(".dropdown, .megamenu").slideUp(settings.speed).focus();
firstItemClick = 1;
}
});
}
});
}
function showCollapse(){
$(menu).children("li:not(.showhide)").hide(0);
$(menu).children("li.showhide").show(0);
$(menu).children("li.showhide").bind("click", function(){
if($(menu).children("li").is(":hidden")){
$(menu).children("li").slideDown(settings.speed);
scrollable(true);
}
else{
$(menu).children("li:not(.showhide)").slideUp(settings.speed);
$(menu).children("li.showhide").show(0);
$(menu).find(".dropdown, .megamenu").hide(settings.speed);
scrollable(false);
}
});
}
function hideCollapse(){
$(menu).children("li").show(0);
$(menu).children("li.showhide").hide(0);
scrollable(false);
}
function rightAlignMenu(){
$(menu).children("li").addClass("jsright");
var items = $(menu).children("li");
$(menu).children("li:not(.showhide)").detach();
for(var i = items.length; i >= 1; i--){
$(menu).append(items[i]);
}
fixSubmenuRight();
}
function fixSubmenuRight(){
$(menu).children("li").removeClass("last");
var items = $(menu).children("li");
for(var i = 1; i <= items.length; i++){
if($(items[i]).children(".dropdown, .megamenu").length > 0){
var lastItemsWidth = 0;
for(var y = 1; y <= i; y++){
lastItemsWidth = lastItemsWidth + $(items[y]).outerWidth();
}
if($(items[i]).children(".dropdown, .megamenu").outerWidth() > lastItemsWidth){
$(items[i]).addClass("last");
}
}
}
}
function fixSubmenuLeft(){
$(menu).children("li").removeClass("fix-sub");
var items = $(menu).children("li");
var menuWidth = $(menu).outerWidth();
var itemsWidth = 0;
for(var i = 1; i <= items.length; i++){
if($(items[i]).children(".dropdown, .megamenu").length > 0){
if($(items[i]).position().left + $(items[i]).children(".dropdown, .megamenu").outerWidth() > menuWidth){
$(items[i]).addClass("fix-sub");
}
}
}
}
function unbindEvents(){
$(menu).find("li, a").unbind();
$(document).unbind("click.menu touchstart.menu");
$(menu).find(".dropdown, .megamenu").hide(0);
}
function windowWidth(){
return document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
}
function scrollable(flag){
if(settings.scrollable){
if(flag){
$(menuWrapper).css("max-height", settings.scrollableMaxHeight).addClass("scrollable");
}
else{
$(menuWrapper).css("max-height", "auto").removeClass("scrollable");
}
}
}
}
}(jQuery));
jQuery(document).ready(function() {
$().jetmenu({
indicator: false,
speed: 300,
delay: 100,
submenuTrigger: "hover"
});
});
1 answers
solution1
1 ACCPTED 2015-04-23 19:28:41
The problem is when you call jQuery's .show(), which adds an inline display:block; style. We can fix this by adding a callback to the function to empty the display declaration:
function hideCollapse(){
$(menu).children("li").show(0,function(){
$(menu).children("li").css("display","");
$(menu).children("li.showhide").hide(0);
});
scrollable(false);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How fix this menu bar to show the dropdown sub-menu?
Expand dropdown menu if one of the sub-menu items is active
Toggling a sub-menu's visibility in jQuery
Sub-menu closes the menu
How to close multiple sub-menu when clicking on any other parent menu's sub menu or same sub-menu
All sub-menu dropdown to show from the top
trouble clicking on dropdown sub-menu through selenium webdriver
Expand jQuery -> Navigation sub-menu -> sub-menu
Persist sub-menu on hover
Sub-menu items not sliding
Related Tags