My goal is to create a nested set of list items in a Joomla menu where the outermost parents adjust their position to make room for the children. The height of each list item needs to be fixed because they will serve as buttons in the menu. Currently, when a child item is added, the parent items underneath it are shifted horizontally and end up overlapping with the child item. Here's a simplified example:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
You can see this issue on my website by visiting the following link:
I've tried adjusting the CSS properties such as changing the position attribute to fixed or relative, but so far I haven't found a solution that prevents the levels from overlapping while maintaining a consistent height of 40 pixels. Is there any way to achieve this using CSS?