Hello,
Firstly, the Menu that you were using in this regard had invalid Menu Items added. So, the Menu Items were not showing. So, we have added a sample Menu Item in this regard and selected the block in it that you have created.
Secondly, the hover over the Menu Item wasn’t selected right now which we have done on your Site and it previews fine like you mentioned in the GIF: https://snipboard.io/xUwinW.jpg
Thirdly, the Menu style that you mentioned in the GIF for the sub-items is a Classic Dropdown style for which you don’t need to create a HTML Block. You just need to add simple sub-items for the main Menu Items and then background color & hover colors for the sub-items can be adjusted through the CSS and Advanced Typography rules. So, we have added a sample sub-items in your Menu and this is how they preview after applying the Theme Settings > Typography > Advanced > Navigation rules: https://snipboard.io/e0rO6S.jpg
The background color change for the Hover effect is done through the following Custom CSS applied under the Dashboard >> Theme Settings >> Custom CSS >> Global CSS section:
html .wd-dropdown-menu.wd-design-default .wd-sub-menu li a:hover {
background: #1eed1e !important;
}
After applying the CSS, this is the resultant preview: https://snipboard.io/7TsxKQ.jpg
Best Regards
.
