0

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

我在响应式网页设计中使用 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>

链接到移动菜单 JS
链接到实时网站

提前致谢！

4

2 回答 2

1

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

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

问题是随着浏览器窗口的放大，我也激活了下拉菜单。

于 2013-05-10T21:00:13.453 回答
1

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

//otherwise, hide the mobile menu
if(!isMobile() && menuExists()){
    $('.mnav').hide();
    $menus.show();
    $menus.find('ul.sub-menu').css('display', 'none');
}
于 2013-05-07T21:14:59.587 回答