How can I hide and show the menu well so that it doesn't look messed up?

Question

Hello The menu is hidden in mobile and tablet mode and can be accessed by pressing the toggle button. I did not change the appearance of my menu for tablet and mobile mode and it is only supposed to be lower and hidden, but when I click on the toggle button or resize, my content appears vertically. if display: none; If I delete it, the items will not be displayed in mobile and tablet mode. Thank you for your guidance.

//html 
<i class="zmdi zmdi-menu"></i>
<div class="col-md-10 col-sm-8 col-xs-6 pull-right rightmenu">
    <ul>
        <li><a href="ghaleb.php"> قالب‌ها </a></li>
        <li><a href="gheymat.php"> تعرفه‌ها </a></li>
        <li><a href="nemoonekar.php"> نمونه‌کارها </a></li>
        <li><a> امکانات <i class="glyphicon glyphicon-menu-down"></i></a>
            <ul>
                <li><a href="emkanat.php"> امکانات و ویژگی‌ها </a></li>
                <li><a href="afzoone.php"> افزونه‌ها </a></li>
                <li><a href="damane.php"> دامنه اختصاصی </a></li>
            </ul>
        </li>
        <li><a> خدمات <i class="glyphicon glyphicon-menu-down"></i></a>
            <ul>
                <li><a href="sitesaz.php"> سایت ساز </a></li>
                <li><a href="frooshgahsaz.php"> فروشگاه ساز </a></li>
            </ul>
        </li>
        <li><a> ادامه <i class="glyphicon glyphicon-menu-down"></i></a>
            <ul>
                <li><a href="academy.php"> آکادمی </a></li>
                <li><a href="rahnama.php"> راهنمای استفاده </a></li>
                <li><a href="tamas.php"> تماس با ما </a></li>
                <li><a href="weblog.php"> وبلاگ </a></li>
            </ul>
        </li>
    </ul>
</div>

// sass
  .rightmenu {
        position: relative;

    ul {
 
       @include displayflex($j-c: space-between);
       height: 60px;
       top: -30px;
       padding: 0px;

        @media only screen and (max-width: 992px){
            display: none;
            position: absolute;
            top: 40px;
            background-color: white;
        }
    }
}

// js
$('.hidemenu').on('click',function(){
    $('.rightmenu ul').slideToggle(1000);
});

$(window).resize(function(e){
    if($(document).width()>992) {
        $('.rightmenu ul').css('display','block');
    } else {
      $('.rightmenu ul').css('display','none');
    }
});