html - 在桌面上隐藏

Question

我有一个导航栏，其中包含一个列表项，我想为在桌面上查看该站点的任何人隐藏该列表项。

我的问题是我试图用来隐藏特定 <li> 的 css 代码标签内容无效，我不确定为什么

这是我的代码

<style>
     @media only screen and (min-width:500px;) {
         li.showonmobile { display:none; visibility: hidden; }
     }
</style>

然后我想在桌面上隐藏的li标签是

      <li class="level0 level-top showonmobile" style="position:relative;"> <a class="open_special_offers" style="cursor:pointer">SPECIAL OFFERS</a>  
            <div id="special_offers_dropdown">
                <h3>ONLINE EXCLUSIVE</h3>
                <div class="so_content">
                    <center>Buy one get one free</center>
                </div>
            </div>
       </li> 

Answer 1

应该是这样的:(没有;)

 @media only screen and (min-width:500px) {
     li.showonmobile { display:none; visibility: hidden; }
 }

工作 DEMO