This is essentially what I am aiming to achieve:
https://i.sstatic.net/OJhAy.png
To illustrate my issue, I have created this codepen:
/** Main Nav **/
#main-nav{
margin:0 auto;
padding-top: 10px;
padding-bottom: 10px;
}
#main-nav .container-fluid{
max-width:1366px;
/* Other CSS rules here */
...
The issue lies in the functionality of my menu.
Each main navigation list item (li) has a drop-down menu and each drop-down menu contains a sub-drop-down menu.
My problem arises when I attempt to open another sub-drop-down-menu on hover that should align with the height of its parent drop-down menu (li). The use of position:absolute for positioning seems to be causing issues as the sub-drop-down-menus end up overlapping one another.
Is there an error in my HTML markup or do I need to adjust my CSS? Despite setting absolute positions relative to their parents which are already set to relative positions, the desired effect is not achieved. How can I resolve this?