Css 完全展开手机中的下拉菜单，但不要在Wordpress的桌面上

我是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媒体查询

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

默认值是多少

.menu-item{
display: none;
}

---

当屏幕低于最大宽度时，使用最大宽度设置css规则

你能澄清你的问题吗？您是否正在尝试将不同的CSS规则应用于移动和桌面？类

.open

是由JS/jQuery动态添加的吗？我希望在手机上显示时菜单栏会自动展开