Line under menu titles ruins drop down menu

Hello guys,

With the help of you guys, I fixed a small like under each menu item when hoovering over it. This works great, but when I have a drop-down menu it gets a little bit messed up. It sort of crosses over the drop down menu text.

This is the CSS I am using:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:after,
.main-navigation .main-nav ul li:hover > a:after,
.main-navigation .main-nav ul li.sfHover:hover > a:after {
content: "";
display: block;
width: 100%;
border-bottom: 0.2px solid #FFFFFF;
position: relative;
top: -10px;
opacity: 1;
}

Could you please help me get rid of the underline in my drop down menu?

Thanks in advance.

Best regards,
Anton