Hi.
First of all, use custom.css file instead of CSS field in the settings of the template. If you do not have this file, create it following Helix documentation.
I do not understand what you expected from adding the sp-megamenu-parent class or using your menusp-megamenu-parent class. The sp-megamenu-parent class tunes the appearance of the upper level menu. And it does this work. It makes no sense to use your code with the menusp-megamenu-parent class. This is just an extra code.
As for the rest - the dropdown menu, its animation of the appearance, the style of the items of the dropdown menu - for all this you must write on your own CSS code. No addition of classes will solve this problem.
Using the DEV Tools of your browser, explore the menu code that comes from Helix, copy it and change the selectors to yours.
Here is an approximate code for a dropdown menu.
.menusp-megamenu-parent .menu-child {
margin: 0;
position: absolute;
background-color: #fff;
padding: 10px;
min-width: 200px;
z-index: 10;
display: none;
}
.menusp-megamenu-parent .menu-deeper.menu-parent:hover .menu-child,
.menusp-megamenu-parent .menu-deeper.menu-parent:hover .menu-child {
display: block;
animation: spFadeInUp 400ms ease-in;
}
.menusp-megamenu-parent .menu-deeper.menu-parent>a::after,
.menusp-megamenu-parent .menu-deeper.menu-parent>span::after {
font-family: "Font Awesome 5 Free";
content: "";
float: right;
margin-left: 7px;
font-weight: 900;
}
![](https://dl4.joxi.net/drive/2024/07/29/0017/0026/1138714/14/b58612098e.jpg)
Make fine tuning by yourself. Or hire someone for this work if your CSS skills are not sufficient.