Quick answer: Elementor sometimes draws a thin line above each sub-menu item, so a dropdown looks like it has stray internal borders. It is a default border on the sub-menu list item. One line of CSS removes it.
What causes it
Elementor’s Nav Menu and Mega Menu widgets apply a border-top to sub-menu items as part of their default styling. On most designs you never notice it, but as soon as you give the dropdown a background or your theme adds its own borders, that top line shows up on every item and the dropdown looks broken.
The fix
.sub-menu .menu-item {
border-top: none !important;
}Where to add it
You have two good places for this, and both survive theme updates:
- The specific menu — edit the Nav Menu widget, open Advanced → Custom CSS, and paste it there so it only affects this one menu. This is the tidiest option.
- Site-wide — Appearance → Customize → Additional CSS, if you want every dropdown on the site fixed at once.
Do not paste it into the theme’s core stylesheet, which an update will overwrite.
How to check it worked
Open a dropdown on the front end (not the editor). The thin line above each item should be gone and the items should sit flush. If one menu still shows it, that menu has its own border set in its widget styling — check the Nav Menu widget’s Style tab.
How to undo it
Delete the two lines. Nothing else changes, and no content is affected — this only ever hid a border.