进行响应式测试后，下拉菜单显示为打开答案

【问题标题】：Drop-down menu appears open after doing responsive test进行响应式测试后，下拉菜单显示为打开
【发布时间】：2013-05-01 23:04:53
【问题描述】：

希望这是一个简单的修复...

我在响应式网页设计中使用 jQuery 移动菜单 - 当我测试响应性（通过挤压浏览器窗口）时，一切正常。当我将其拉伸回全角时，下拉菜单显示为打开。如果我将鼠标悬停在它们上方或刷新页面，它们就会消失...

任何帮助将不胜感激。

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

提前致谢！

【问题讨论】：

标签： jquery css drop-down-menu menu responsive-design

【解决方案1】：

发生的情况是您的菜单（包括子菜单）被设置为 display: block 当页面展开回桌面宽度时。试试这样的：

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

【讨论】：

感谢您的反馈 - 实际上找到了一个稍微不同的解决方案。

【解决方案2】：

原来我只需要在我的 JS 中添加 '>'：

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

问题是我也在浏览器窗口放大时激活下拉菜单。

【讨论】：