After adding mmenu the complete mmenu is not readable even tab navigation is not going to it, so its completely not clickable

Question

here is my code snippet, the mmenu is rendering on page but i can't able to click on any menu items, any suggestions pls

const menuElement = this.shadowRoot?.querySelector('#mobile-menu');
const menu = new Mmenu(menuElement, {
"slidingSubmenus": true,
"offCanvas": {
"position": "left",
},
"theme": "light",
});

<nav id="mobile-menu">
      <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/work">Our work</a></li>
                <li>About us
                    <ul>
                        <li><a href="/about/history">History</a></li>
                        <li>The team
                            <ul>
                                <li><a href="/about/team/management">Management</a></li>
                                <li><a href="/about/team/sales">Sales</a></li>
                                <li><a href="/about/team/development">Development</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>Services
                    <ul>
                        <li><a href="/services/design">Design</a></li>
                        <li><a href="/services/development">Development</a></li>
                        <li><a href="/services/marketing">Marketing</a></li>
                    </ul>
                </li>
                <li><a href="/contact">Contact</a></li>
            </ul>
</nav>
      

at last the menu is rendring but its nnot clickable, any idea why ?enter image description here