Css 如何使用@media重新设置移动视图的菜单样式

我努力让这个菜单在我的页面上运行，但我仍然在移动视图中挣扎

我想把它设计成最经典的导航，比如：

移动菜单，100%宽度，每行一项

我试过：

@media (max-width :899px){
.site-nav {
display: block;
width: 100%;

但这对弹性项目没有影响

能不能请你告诉我从哪里开始

jQuery文档.ready函数${ //将JS类添加到HTML标记中 $'html'.addClass'js'； //为子菜单和子菜单切换按钮添加类 $.site nav li>ul.parent'li'。addClass'has-sub-menu'； $.site nav li>ul.addClass“子菜单”； //“创建”按钮，用于展开和折叠菜单并将其渲染到标题中 var create_toggle_nav_button=['Menu'].加入； $header.appendcreate_toggle_nav_按钮； //创建按钮，用于展开和折叠移动视图的子菜单，并将它们添加到所有子菜单中 var create_sub_toggle_button=[].join； $.has sub menu>a.aftercreate\u sub\u toggle\u按钮； //定义变量 变量$menu=$'。站点导航'， $toggle_nav=$'。切换站点nav'， $toggle_sub_menu=$'。toggle sub menu'； //主菜单的折叠和展开功能 $toggle_nav.clickFunction{ e、 防止违约； $menu.slideToggle； }; //移动视图下拉菜单的折叠和展开功能 $toggle\u sub\u菜单。单击功能E{ e、 防止违约； var$this=$this； $this.toggleClass'active'。next'ul'。slideToggle； }; //当用户调整browserwindow的大小时，再次显示隐藏元素 $window.resizefunction{ var w=$window.width； 如果W>900{ $'.site nav'.removeAttr'style'； $'.sub-menu'.removeAttr'style'； } }; //当导航超出视口时，自动向左折叠导航 $.site nav.具有子菜单。在“mouseenter mouseleave”上，函数e{ var nav_元素=$'ul:first'，这是； 可变元素偏移量=导航元素偏移量； var element_offset_left=element_offset.left； var元素的宽度=nav元素的宽度； var viewport_width=$window.width； 视口中的变量元素=元素偏移量+元素宽度{ 显示器：flex； 弯曲方向：行； 证明内容：柔性端； 对齐项目：拉伸； 柔性包装：包装； 保证金：自动； } .站点导航>ul>li{ 显示：内联块； 柔性包装：包装； 宽度：自动； 填充：0； } .场地导航a{ 显示：内联flex； 对齐内容：拉伸； 填充：1em； 空白：nowrap； 文字装饰：无； 身高：100%； 宽度：100%； 颜色：白色；/*所有文本的文本颜色*/ 背景：5a595a；/*背景色主导航链接1*/ 边框顶部：1px实心rgba0,0,0,0.5； z指数：10； } .站点导航a：悬停{ 背景：8c8e94；/*鼠标覆盖颜色链接1和链接1.1不透明度*/ } .js.站点导航{ 显示：无； } .js.子菜单{ 显示：无； 位置：绝对位置； 最高：100%； 左：0px； z指数：12； } .js.子菜单.子菜单{ 顶部：0px； 右：100%； 左：自动； 文本对齐：右对齐； } .js.具有子菜单{ 位置：相对位置； 最高：100%； 左：0px； } .子菜单li：类型的最后一个{ 填充底部：0； } .子菜单a{ 背景：676567；/*仅限背景色菜单2.1*/ } .子菜单.子菜单a{ 背景：747274；/*仅限背景色菜单2.1.1*/ } .子菜单.子菜单a:悬停{ 背景：8c8e94；/*鼠标覆盖颜色链接1和链接1.1*/ } /*切换*/ .切换站点导航{ 背景：5a595a；/*调整菜单按钮大小时的背景色*/ 显示：块； 位置：绝对位置； 右：0； 排名：0； 填充：1em； 颜色：白色；/*调整大小时菜单按钮中单词菜单的文本颜色*/ 光标：指针； z指数：10； } .切换站点导航：悬停{ 背景：rgba0,0,0,0.5；/*鼠标在调整大小时覆盖菜单按钮的颜色*/ } .切换子菜单{ 显示：无； } .js.切换子菜单{ 显示器：flex； 位置：绝对位置； 对齐内容：居中对齐； 右：0em； 顶部：1.05em；/*边界高度*/ 背景：817e81；/*调整大小时恼人方块的背景*/ 高度：15px； 宽度：15px； 光标：指针； z指数：11； } .js.toggle-sub-menu.active{ 背景：dcdc；/*调整大小时单击恼人方块后的颜色*/ } .切换子菜单：悬停， .切换子菜单。活动：悬停{ 背景色：rgba0,0,0,0.4；/*调整大小时鼠标悬停在恼人的方块上*/ } @媒体屏幕和最小宽度：900px{ .标志{ 宽度：自动； 浮动：左； } .场地导航{ 宽度：自动； 显示：flex！重要； } .场地导航a{ 边界：无； } .场地导航李{ 宽度：自动； 填充：0； } .站点导航李：悬停{ 背景：rgba52,50,52,1；/*鼠标覆盖所有菜单的背景色*/ } .有子菜单a{ 右填充：2em；/*检查此值*/ } .has子菜单：{/*之后，选中此项以编辑条纹*/ 显示器：flex； 内容：； 位置：绝对位置； 对齐内容：居中对齐； 顶部：1.1米； 右：0； 宽度：1米； 身高：30%； 背景：817e81；/*条纹i的颜色 n主菜单（如果有子菜单）*/ } /*子菜单*/ .site nav li:悬停>.子菜单{ 显示：块； 位置：绝对位置； 宽度：300px；/*子菜单的宽度*/ 填充：0 25px 25px 25px； 左：-25px； } .子菜单{显示：无；} .子菜单li{ 宽度：100%； } .子菜单>a{ 宽度：100%； 显示：块； } .有子菜单。有子菜单：之后{ 背景：817e81；/*链接2.1菜单中有子菜单时的条纹颜色*/ } .有子菜单。有子菜单：悬停。子菜单{ 显示：块； 位置：绝对位置； 宽度：300px；/*子菜单的宽度*/ 填充：0 25px 25px 25px； 左：224px； 顶部：0px； } .切换站点导航， .切换子菜单{ 显示：无！重要； } /*导航项，向左折叠*/ .sub left>.sub菜单{ 左：自动； 右：0； } .site nav.子菜单.sub left>.sub菜单{ 左：-275px； } } @介质最大宽度：899px{ .场地导航{ z指数：13； 边缘顶端：19像素； } } 试试这个

@media screen and (max-width: 899px){
.site-nav>ul {
    display: block !important;
    width: 100%;
    margin: auto;
}
.site-nav >ul> li {
    display: block !important;
    width: auto;
    width: 100%;
}
}

jQuery文档.ready函数${ //将JS类添加到HTML标记中 $'html'.addClass'js'； //为子菜单和子菜单切换按钮添加类 $.site nav li>ul.parent'li'。addClass'has-sub-menu'； $.site nav li>ul.addClass“子菜单”； //“创建”按钮，用于展开和折叠菜单并将其渲染到标题中 var create_toggle_nav_button=['Menu'].加入； $header.appendcreate_toggle_nav_按钮； //创建按钮，用于展开和折叠移动视图的子菜单，并将它们添加到所有子菜单中 var create_sub_toggle_button=[].join； $.has sub menu>a.aftercreate\u sub\u toggle\u按钮； //定义变量 变量$menu=$'。站点导航'， $toggle_nav=$'。切换站点nav'， $toggle_sub_menu=$'。toggle sub menu'； //主菜单的折叠和展开功能 $toggle_nav.clickFunction{ e、 防止违约； $menu.slideToggle； }; //移动视图下拉菜单的折叠和展开功能 $toggle\u sub\u菜单。单击功能E{ e、 防止违约； var$this=$this； $this.toggleClass'active'。next'ul'。slideToggle； }; //当用户调整browserwindow的大小时，再次显示隐藏元素 $window.resizefunction{ var w=$window.width； 如果W>900{ $'.site nav'.removeAttr'style'； $'.sub-menu'.removeAttr'style'； } }; //当导航超出视口时，自动向左折叠导航 $.site nav.具有子菜单。在“mouseenter mouseleave”上，函数e{ var nav_元素=$'ul:first'，这是； 可变元素偏移量=导航元素偏移量； var element_offset_left=element_offset.left； var元素的宽度=nav元素的宽度； var viewport_width=$window.width； 视口中的变量元素=元素偏移量+元素宽度{ 显示器：flex； 弯曲方向：行； 证明内容：柔性端； 对齐项目：拉伸； 柔性包装：包装； 保证金：自动； } .站点导航>ul>li{ 显示：内联块； 柔性包装：包装； 宽度：自动； 填充：0； } .场地导航a{ 显示：内联flex； 对齐内容：拉伸； 填充：1em； 空白：nowrap； 文字装饰：无； 身高：100%； 宽度：100%； 颜色：白色；/*所有文本的文本颜色*/ 背景：5a595a；/*背景色主导航链接1*/ 边框顶部：1px实心rgba0,0,0,0.5； z指数：10； } .站点导航a：悬停{ 背景：8c8e94；/*鼠标覆盖颜色链接1和链接1.1不透明度*/ } .js.站点导航{ 显示：无； } .js.子菜单{ 显示：无； 位置：绝对位置； 最高：100%； 左：0px； z指数：12； } .js.子菜单.子菜单{ 顶部：0px； 右：100%； 左：自动； 文本对齐：右对齐； } .js.具有子菜单{ 位置：相对位置； 最高：100%； 左：0px； } .子菜单li：类型的最后一个{ 填充底部：0； } .子菜单a{ 背景：676567；/*仅限背景色菜单2.1*/ } .子菜单.子菜单a{ 背景：747274；/*仅限背景色菜单2.1.1*/ } .子菜单.子菜单a:悬停{ 背景：8c8e94；/*鼠标覆盖颜色链接1和链接1.1*/ } /*切换*/ .切换站点导航{ 背景：5a595a；/*调整菜单按钮大小时的背景色*/ 显示：块； 位置：绝对位置； 右：0； 排名：0； 填充：1em； 颜色：白色；/*调整大小时菜单按钮中单词菜单的文本颜色*/ 光标：指针； z指数：10； } .切换站点导航：悬停{ 背景：rgba0,0,0,0.5；/*鼠标在调整大小时覆盖菜单按钮的颜色*/ } .切换子菜单{ 显示：无； } .js.切换子菜单{ 显示器：flex； 位置：绝对位置； 对齐内容：居中对齐； 右：0em； 顶部：1.05em；/*边界高度*/ 背景：817e81；/*调整大小时恼人方块的背景*/ 高度：15px； 宽度：15px； 光标：指针； z指数：11； } .js.toggle-sub-menu.active{ 背景：dcdc；/*调整大小时单击恼人方块后的颜色*/ } .切换子菜单：悬停， .切换子菜单。活动：悬停{ 背景色：rgba0,0,0,0.4；/*调整大小时鼠标悬停在恼人的方块上*/ } @媒体屏幕和最小宽度：900px{ .标志{ 宽度：自动； 浮动：左； } .场地导航{ 宽度：自动； 显示：flex！重要； } .场地导航a{ 边界：无； } .场地导航李{ 宽度：自动； 填充：0； } .站点导航李：悬停{ 背景：rgba52,50,52,1；/*鼠标覆盖所有菜单的背景色*/ } .有子菜单a{ 右填充：2em；/*检查此值*/ } .has子菜单：{/*之后，选中此项以编辑条纹*/ 显示器：flex； 内容：； 位置：绝对位置； 对齐内容：居中对齐； 顶部：1.1米； 右：0； 宽度：1米； 身高：30%； 背景：817e81；/*主菜单中有子菜单时的条纹颜色*/ } /*子菜单*/ .site nav li:悬停>.子菜单{ 显示：块； 位置：绝对位置； 宽度：300px；/*子菜单的宽度*/ 填充：0 25px 25px 25px； 左：-25px； } .子菜单{显示：无；} .子菜单li{ 宽度：100%； } .子菜单>a{ 宽度：100%； 显示：块； } .有子菜单。有子菜单：之后{ 背景：817e81；/*链接2.1菜单中有子菜单时的条纹颜色*/ } .有子菜单。有子菜单：悬停。子菜单{ 显示：块； 位置：绝对位置； 宽度：300px；/*子菜单的宽度*/ 填充：0 25px 25px 25px； 左：224px； 顶部：0px； } .切换站点导航， .切换子菜单{ 显示：无！重要； } /*导航项，向左折叠*/ .sub left>.sub菜单{ 左：自动； 右：0； } .site nav.子菜单.sub left>.sub菜单{ 左：-275px； } } @仅介质屏幕，最大宽度：899px{ .site nav>ul{ 显示器：flex； 弯曲方向：行； 证明内容：柔性端； 对齐项目：拉伸； 柔性包装：包装； 保证金：自动； } .站点导航>ul>li{ 显示：内联块； 柔性包装：包装； 宽度：自动； 填充：0； } }

---

.站点导航不是唯一的弹性项，其中UL也是弹性项。加上李是内联块。。。因此，您必须覆盖更多的样式。提示：使用浏览器开发工具，你可以看到什么样式适用于什么元素。谢谢你，Hardi，我试过你的建议，但没用。但还是要感谢您抽出时间：