实施resposive没有崩溃响应菜单

Question

我想实现这个菜单

问题在于形状和hover以及如何使其响应您知道，我想将此菜单样式保留在移动设备中并且不会在移动设备中崩溃所有文字都会消失且只有图标会留下来。

我试过的东西就在这里：

<section class="slide menu clearfix">
    <div>
        <h1>Qweb|کیو وب</h1>
        <nav class="clearfix">
            <ul class="clearfix">
                <li class="Mhome"><a href="#">صفحه اصلی</a></li>
                <li class="Mservice"><a href="#one">خدمات</a></li>
                <li class="Mporfolio"><a href="#two">نمونه کارها</a></li>
                <li class="Mcash"><a href="#three">تعرفه ها</a></li>
                <li class="Mabout"><a href="#four">درباره ما</a></li>
                <li class="Mcontact"><a href="#five">ارتباط با ما</a></li>
            </ul>
        </nav>
    </div>
</section>

我使用白色背景：

body {
    background-color: gray;
}
.logo {
    background-color: white;
    border-radius: 0px 0px 30% 30%;
}

我得到了这个：