I'm working on developing a unique mega menu that showcases all the contents of each list item. Imagine it as a traditional drop-down menu, but with the twist that all child items are visible upon hover.
I have successfully displayed all the items, but I am facing a challenge in extending the background of the drop-down menu to cover the full width of the browser.
Initially, I attempted to extend the last submenu, but unfortunately, that did not yield the desired results.
Check out the CodePen for the complete code
Here are some code snippets:
HTML
<nav class="main-nav">
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
CSS
.subnav-block {
position: static;
display: block;
width: 100% !important;
top: 54px;
left: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
background: gray;
-webkit-transition: all 0.3s ease 0.15s;
-moz-transition: all 0.3s ease 0.15s;
-o-transition: all 0.3s ease 0.15s;
-ms-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.nav .subnav-block {
float: none;
width: 200px;
}