使用CSS格式化响应菜单（jQuery）

我正在开发一个顶部导航菜单，它将为全尺寸屏幕和移动屏幕提供不同的布局。这是为了遵循通常的惯例，将手机上的菜单缩小为单个全宽按钮，单击该按钮将下拉菜单选项

总的来说，它工作得很好，但我在格式设置上遇到了问题。全宽版很好（每个按钮为中灰色，悬停时为略深灰色）。但是，在移动版本中，第一个菜单项（“主页”）显示.nav格式，所有其他菜单项显示.nav li或.nav li a格式

我想问题出在jQuery上，但不确定

$(document).ready(function(){ 
    var touch   = $('#touch-menu');
    var nav     = $('.nav');

    $(touch).on('click', function(e) {
        e.preventDefault();
        nav.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 767 && nav.is(':hidden')) {
            nav.removeAttr('style');
        }
    });

});

这里有一个例子来说明这个问题

---

如何使所有菜单行看起来相同？

这是因为您指定了ul item.nav的高度

如果您删除高度并设置overflow:hidden以获得填充导航的背景色，则该功能将起作用

.nav{
     display:block;
     list-style-type:none;
     margin:0;
     padding:0;
     overflow: hidden;
     font:12px Geneva, Arial, Helvetica, sans-serif;
     background:#ccc;
     border:1px solid #999
}

---

另外，如果添加

文本对齐：居中

到.mobile nav类，则移动版本中的“菜单”将正确对齐。

如果是格式问题，则不是Jquery。将

.mobile nav a

的样式与您的普通

nav li a

进行比较，看看是否有任何差异。您正在使用jQuery同时检查窗口宽度和CSS

@media

；为什么？更新了提琴：你可能想注意到这是因为浮动列表项。我接受了@MattP的答案。不过，故事还没有结束，因为overflow:hidden阻止了子菜单的工作。边界仍然存在一些问题，但我会努力解决。谢谢。所有的。我也会从@ HasHM QoLAMI中查看评论，看看它是否对事物有任何影响。溢出：隐藏实际上是使背景颜色起作用，考虑将背景颜色移到.Navi-Li“菜单”只被扔进JSfDeld以保存必须链接到图形。话虽如此，我还是从“菜单”这个词开始，我的问题（尚未解决）是垂直对齐，而不是水平对齐。我从.mobile nav中删除了高度（39px），并将填充设置更改为14px 2%，这使我实现了完美的垂直对齐。希望有帮助@B R，它可以单独处理文本，但不幸的是，当文本必须与图像共享空间时，它不能。文本然后被强制到移动导航空间的底部。我确实发现CSS中的对齐是一件令人头痛的事。