CODEWITHSUNDEEP
jquerycssdrop-down-menumenuresponsive-design
LarryC
LarryC

Reputation: 35

Drop-down menu appears open after doing responsive test

Hoping this is an easy fix...

I'm using a jQuery mobile menu in my responsive web design - when I do a test of the responsiveness (by squeezing the browser window) everything works fine. When I stretch it back to full-width the drop down menus appear open. If I hover over them or refresh the page they go away...

Any help would be greatly appreciated.

CSS:

<pre>

.menu {
    float: right;
    clear: right;
    margin: 29px 0 0;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 400;
    float: right;
}

.menu ul li {
    margin: 0;
    padding: 0;
}

.menu > ul,.menul ul > li > ul {
    list-style: none;
    position: relative;
}

.menu > ul > li {
    float: left;
    margin: 0 0 0 20px;
    padding-top: 6px;
}

.menu > ul > li > a {
    color: #888;
    display: block;
    font-size: 16px;
    padding: 0 0 2px;
    text-decoration: none;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.menu > ul > li:hover > a,.menu > ul > li.active > a {
    border-bottom: 2px solid #8dc63f;
    text-decoration: none;
    color: #fff;
}

.menu > ul > li > ul {
    background: url(drop-bg.png);
    position: absolute;
    font-size: 11px;
    padding: 0;
    min-width: 220px;
    display: none;
}

.menu > ul > li:hover > ul {
    display: block;
}

.menu > ul > li ul li a {
    color: #999;
    display: block;
    line-height: 24px;
    padding: 5px 20px;
    text-decoration: none;
    text-shadow: none;
}

.menu > ul > li ul li a:hover {
    background: #83ba3a;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 1px 1px #000;
}
</pre>

Link to Mobile Menu JS
Link to Live Website

Thanks in advance!

Upvotes: 0

Views: 626

Answers (2)

LarryC
LarryC

Reputation: 35

It turned out I just need to add '>' to my JS:

$('.menu > ul').mobileMenu();

Issue was I was also activating the drop-down as the browser window was enlarged.

Upvotes: 1

Ken Hannel
Ken Hannel

Reputation: 2748

What's happening is that your menu (including sub-menus) are being set to display: block when the page is expanded back out to desktop width. Try something like this: 

//otherwise, hide the mobile menu
if(!isMobile() && menuExists()){
    $('.mnav').hide();
    $menus.show();
    $menus.find('ul.sub-menu').css('display', 'none');
}

Upvotes: 1

Related Questions