按钮未在移动视图上替换为替代按钮

Question

我想让网页视图上的桌面按钮消失。

下面的第一张图片是网站的完整视图和图片按钮大小。

第一个按钮在移动视图中没有消失。

#menu-item-242{
      background-color:#e74c3c;
      padding: 2px 5px 0px 30px;
      border:none;
      border-radius:2px;
      color:white;
      text-decoration: none;
}

HTML

<div class="wrap">
<ul id="menu-secondary-items" class="menu-items">
<li id="menu-item-242" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-242"><a href="#">Business</a></li>
</ul></div>

更新

@media only screen and (min-width:800px) {
    .menu > .wrap {
        display: block!important;
    }

    .menu- toggle {
        display: none;
    }

    .menu ul {
        list-style: none;
        margin: 0;
    }

    .menu-items {
        zoom: 1;
    }

        .menu-items::before, .menu-items::after {
            content: "";
            display: table;
        }

        .menu-items::after {
            clear: both;
        }

        .menu-items > ul {
            width: 100%;
            margin: 60px auto;
        }

        .menu-items li li a {
            -webkit-transition: all 0 ease 0;
            -moz-transition: all 0 ease 0;
            -o-transition: all 0 ease 0;
            transition: all 0 ease 0;
        }

        .menu-items li:hover > ul, #menu-secondary .menu-items li:hover > ul {
            margin: 0;
        }
}