在移动设备中完全展开下拉菜单，但在 Wordpress 的桌面上没有答案

【问题标题】：Full expand the dropdown menu in mobile, but not in desktop on Wordpress在移动设备中完全展开下拉菜单，但在 Wordpress 的桌面上没有
【发布时间】：2018-10-19 07:05:01
【问题描述】：

我是 wordpress 的新手，想在移动版的标题中完全展开菜单栏，而不是在桌面版中。我怎样才能在 CSS 中做到这一点？这是我尝试的代码，但没有成功：

.menu-item {
  display: none;
}

.open>.menu-item {
  display:block;
}

这里是html代码：

<div id="primary-menu" class="menu"><ul>
<li class="page_item page-item-77 page_item_has_children current_page_item"> 
<a href="http://localhost/innospace/wordpress/?page_id=77">Facilities</a>
<ul class='children'>
<li class="page_item page-item-98"><a 
href="http://localhost/innospace/wordpress/?page_id=98">Printing</a></li>
<li class="page_item page-item-181"><a 
href="http://localhost/innospace/wordpress/?page_id=181">Scanning</a> 
</li>
</ul>
</li>
<li class="page_item page-item-14"><a 
href="http://localhost/innospace/wordpress/">welcome</a></li>
</ul></div>

【问题讨论】：

您能澄清一下您的问题吗？您是否尝试将不同的 CSS 规则应用于移动设备和桌面设备？ .open这个类是JS/jQuery动态添加的吗？
我希望菜单栏在移动设备上显示时自动展开

标签： css wordpress drop-down-menu navigationbar

【解决方案1】：

你很接近。像这样使用 css 媒体查询

@media only screen and (max-width:600px) {
    .menu-item{
    display: block;
    }
  }

并具有默认值

.menu-item{
display: none;
}

以最大宽度播放 arround，因为当屏幕低于该宽度时，它会在其下方设置 css 规则。

【讨论】：