css - Avada WordPress Theme: Rounding corners on dropdown Submenu

Question

I′m working on a new WordPress Site using the Avada Theme. To make the menu a bit more charmful, i want the corners of the Dropdown Sub Menu to be rounded.

So I tried to add the following custom CSS Code:

.sub-menu {
border-radius: 0 0 15px 15px;
overflow: hidden;}

Well, that worked and looks good. The problem i′m facing right now: In one case, I need a additional submenu entry (so a Sub-Sub-Menu). And since I′m using "overflow: hidden" the site won't show me the second submenu.

Do you have any idea how to achieve the rounded corners with working sub menu for a CSS noob?

Thank you for your time, I appreciate your work!

Cheers,

Nick

Round corners but no Submenu

Submenu appearing without custom CSS

<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6 fusion-dropdown-menu" data-item-id="6" style="overflow: visible;">

<a href="#" class="fusion-bottombar-highlight" aria-haspopup="true"><span class="menu-text">Teamevents</span></a><ul class="sub-menu"><li id="menu-item-1377" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1377 fusion-dropdown-submenu">

//BEGINNING OF SUBMENU

<a href="LINK" class="fusion-bottombar-highlight"><span>Menu 1</span></a></li><li id="menu-item-1127" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1127 fusion-dropdown-submenu">
<a href="LINK" class="fusion-bottombar-highlight"><span>Menu 2</span></a></li><li id="menu-item-371" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-371 fusion-dropdown-submenu">
<a href="LINK" class="fusion-bottombar-highlight" aria-haspopup="true"><span>Menu 3</span></a>

//BEGINNING OF SUB-SUBMENU ONE (won't be shown)

<ul class="sub-menu"><li id="menu-item-338" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-338"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 1</span></a></li></ul></li><li id="menu-item-1458" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1458 fusion-dropdown-submenu">

//END

<a href="#" class="fusion-bottombar-highlight" aria-haspopup="true"><span>Menu 4</span></a><ul class="sub-menu"><li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340">

//BEGINNING OF SECOND SUB-SUBMENU (won't be shown)

<a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 2</span></a></li><li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342">
<a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 3</span></a></li><li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 4</span>
</a></li><li id="menu-item-344" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-344"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 5</span></a>
</li><li id="menu-item-345" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-345"><a href="LINK" class="fusion-bottombar-highlight"><span>Submenu 6</span></a></li></ul></li></ul></li>

question from:https://stackoverflow.com/questions/65950696/avada-wordpress-theme-rounding-corners-on-dropdown-submenu

Answer 1

Try using these instead.

.avada-has-mainmenu-dropdown-divider .fusion-main-menu .fusion-dropdown-menu .sub-menu li:last-child a:hover{
  border-radius: 0 0 15px 15px !important;
}
.avada-has-mainmenu-dropdown-divider .fusion-main-menu .fusion-dropdown-menu .sub-menu li:last-child a{
  border-radius: 0 0 15px 15px !important;
  border: unset !important;
}
ul.sub-menu {
    border-radius: 0 0 15px 15px !important;
}

A link to the actual site would be good too.