I have a question about the navigation menu I created using CSS. I have included a sub-menu that appears when hovering over the main menu item, along with a triangle created with CSS placed underneath the menu. You can view the sample code here:
I am facing two issues with this setup.
<div class="arrow-up"></div>
This is the div containing the arrow.
First issue: I am struggling to center the triangle based on the width of the list item as it varies in size. How can I achieve this alignment?
The following div displays after hovering over the menu:
<div class="dropdown"> </div>
Second issue: When hovering over the main menu item, the submenu appears. However, if you try to move your cursor to the submenu, it closes due to the margin I added for the visibility of the triangle. The submenu remains open only if you hover directly through the triangle, which is not very user-friendly. I need a solution where the margin area also triggers the display of the submenu so it doesn't disappear before reaching it.
If you have any suggestions or solutions for these problems, please share them. Thank you for your assistance!