The best possible responsive menu

[Koji]

I am using HTML, CSS, JS to code a footer that looks good on large and small screens, but appears messy on mobile devices.

I might wait a bit before going to CodePen and taking a sample footer and adapting it, but if you have an approach to recommend for making my top navigation, which includes the top menu and the footer with a bottom menu, look good on mobile screens.

Maybe better utilization of media queries or using something that has already been optimized would suffice...

I will showcase the nav-top section, which looks the worst on small screens. I was going to add CSS, but there are too many classes, and it makes the topic cumbersome.

HTML:
```html
<nav>
<button class="menu-toggle" aria-label="Toggle menu">
<!-- <span class="fas fa-bars"></span> -->
</button>
<div class="main-menu-container">
<ul class="main-menu">
<li><a href="#footer-bottom" class="menu-item active" title="Home bottom part"><i class="fas fa-home"></i></a></li>
<li class="menu-dropdown">
<a href="#" title="Links to the table-board - Re-press categories in the main table-board" class="menu-item">Assistance</a>
<ul class="submenu">
<li><a href="#td9">Dev Assistant</a></li>
<li><a href="#td8">Copy Assistant</a></li>
<li><a href="#td11">Audio Assistant</a></li>
<li><a href="#td5">Digital Assistant</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Links to the table-board - Re-press categories in the main table-board" class="menu-item">Generation</a>
<ul class="submenu">
<li><a href="#td1">Text to Audio</a></li>
<li><a href="#td12">Text to Image</a></li>
<li><a href="#td10">Text to Video</a></li>
<li><a href="#td7">Web Searcher</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Links to the table-board - Re-press categories in the main table-board" class="menu-item">Editing</a>
<ul class="submenu">
<li><a href="#td3">Image Editor</a></li>
<li><a href="#td4">Video Editor</a></li>
<li><a href="#td6">Logo Editor</a></li>
<li><a href="#td2">CV Editor</a></li>
</ul>
</li>
<li class="menu-dropdown">
<a href="#" title="Links to Board, Blogs, and RSS feed" class="menu-item">Content</a>
<ul class="submenu">
<li><a href="#" class="blog-item"><i class="fas fa-newspaper"></i>Board</a></li>
<li><a href="./blogs/_site/index.html" class="blog-item"><i class="fas fa-newspaper"></i>Blogs</a></li>
<li><a href="./blogs/_site/feed.xml"><i class="fas fa-rss"></i>RSS</a></li>
</ul>
</li>
</ul>
</div>
</nav>
```