Currently, I am in the process of constructing a megamenu. In this setup, there is an unordered list that is positioned relative to its parent container.
Within this list, there are individual items that contain links along with separate div containers that are absolutely positioned.
To guide me through this project, I am following a tutorial available at this link.
However, my goal is to ensure that each container div spans the maximum width of the main menu. So when hovering over a menu item, the dropdown should display as 100% width of the entire menu and aligned to the left, rather than being restricted to the width of the containing list item.
How can I achieve this effect?
Below is the current HTML and CSS code structure along with a direct link to access it on jsfiddle:
HTML
<ul id="menu">
<li><a href="~/">Home Page</a></li>
<li><a href="#" onclick="return false;">About Us</a>
<div class="dropdown_1columns">
<p>5 Columns content</p>
</div>
</li>
...
</ul>CSS
#menu {
position:relative !important;
...
}
.dropdown_1columns,
...
{
width:100% !important;
...
}
...
#menu li:hover .dropdown_1columns,
...
{
left:-1px;top:auto;
}
Link to Fiddle
Access the code on jsfiddle here.
The desired outcome is for each dropdown container to expand to 100% of the menu's width while staying left-aligned.