missing links in megamenu

I played around with several mega menus trying different things to get it to work. Then I realized that by some coincidence, I was able to add two links but could not remember what I did to make it work. This happened a few times and could not figure out what the order steps were. Joomshaper's documentation is not good or up to date...as far as I could tell.

These steps helped me to get it to work.

1. Create mega menu
2. Add links to mega menu in the regular menu page
3. Go to manage menus > select menu that holds the mega menu> select "BUILD"
4. Go to Template>Navigation>Mega Menu and create layout.

I don't know if there is a better way to do this, but it took me hours to get it to work. I asked for help because I thought it was hopeless so I accepted your answer because you would have shown me. If there is a better way, let me know.

How do you create the green underline that appears when you hover over a main menu link?

The green underline:
I chose a template that already had a main-menu underline. I suppose there might be a way to create the underline using a template that does not have it. I don't know, I don't code. I chose the path of least resistance.

I found the code to change the colors of the underline by googling Joomshaper for the css:

.sp-megamenu-parent .sp-menu-item a:before{
background-color: lime !important;
}
.sp-dropdown .sp-menu-item a:before{
background-color: lime !important;
}

Thank you.
It helps much.