Css 响应式菜单：在较小屏幕上垂直，但在较大屏幕上水平

在响应式网站上，我想在较小的屏幕上显示垂直菜单，在较大的屏幕上显示水平菜单。 目前，以下HTML和CSS代码在较小的屏幕上不显示垂直菜单。任何人都可以修改/改进此代码吗？提前谢谢

#菜单{
宽度：100%；
最小高度：40px；
位置：相对位置；
背景色：rgb（52,85,154）；
}
#菜单a{
显示：内联块；
填充：10px4%0px4%；
字体：400 16px/32px“信使”，无衬线；
最小高度：40px；
颜色：白色；
文字装饰：无；
字体大小：粗体；
过渡：.5s；
}
#菜单a：悬停{
颜色：红色；
背景颜色：蓝色；
}
@媒体屏幕和屏幕（最大宽度：640像素）{
#菜单{
最大宽度：100%；
}
}
@媒体屏幕和屏幕（最大宽度：775px）{
#菜单a{
最大宽度：100%；
填充：0px 5px 0px 5px；
浮动：无；
文本对齐：居中；
}
}
@媒体屏幕和屏幕（最大宽度：980px）{
#菜单{
最大宽度：100%；
}
}

---

添加

显示：块此处声明：

@media screen and (max-width:775px) {
   #menu a {
       max-width: 100%;
       padding: 0px 5px 0px 5px;
       float: none;
       text-align: center;
       display: block;
   }
}

创建响应性网站时，主导航通常是最棘手的，因为通常需要在移动屏幕上垂直显示项目（以及在汉堡包下拉列表/弹出框中），然后在桌面屏幕上水平显示项目

第一步是使用移动优先的方法开发它。这意味着：

设计所有内容，使其在小屏幕上看起来很好
使用媒体查询逐步设置较大屏幕尺寸的样式
下面是一个基本片段，介绍如何设置菜单样式，使其在小屏幕上垂直显示，在大屏幕上水平显示

/* Mobile style first */
.menu {
    text-align: center;
}
.menu a {
    display: block;
    padding: 10px;
}
.menu a:hover {
    background-color: #eee;
}

/* Desktop style after */
@media (min-width: 600px) {
    .menu a {
        display: inline-block;
    }
}

查看此示例
您可以尝试以下代码片段

HTML
只需在导航标记的正上方添加一个跨度标记

<span id='trigger'> Menu </span>

Javascript

jQuery("#trigger").click(function() {

    jQuery("#menu").slideToggle(500, function() {
        jQuery(this).toggleClass("expand").css('display','500');
    });

});

我希望这有帮助
我刚刚添加了您建议的行。它起作用了！谢谢现在，如何在较小的屏幕上显示/隐藏功能，以便隐藏占据如此多空间的垂直菜单？如果不必担心IE8，那么可以使用输入复选框方法（在这种情况下，需要应用js polyfill来处理：checked选择器）。我想你想要这样的东西：请详细写下代码（jsfiddle.net/yhcj9dsd–allianto），这样我就可以试试了。谢谢。对不起，您可以在我提供的JSFIDLE上扫描代码。这已经超出了您主要问题的范围，我在单击“jsfiddle.net/yhcj9dsd”时已经回答了这个问题，我找到了代码。该菜单用于切换隐藏/取消隐藏菜单元素。非常感谢你的帮助。
jQuery("#trigger").click(function() {

    jQuery("#menu").slideToggle(500, function() {
        jQuery(this).toggleClass("expand").css('display','500');
    });

});