ssubmenus are clipping, my 3rd level sub-level menu cutoff by 2nd level sub menu

• 

  staywellbeingresort · Member · Sep 16, 2024 at 9:43 am

  • Copy link
  • Add topic to favorites

  As mentioned, I created multi level sub menus but they aren’t positioning well like 3rd level sub menu should be right and outside of the box of 2nd level menu but it stuck in 2nd level submenu box and being cutoff.

• 

  staywellbeingresort · Member · Sep 16, 2024 at 9:45 am

  • Copy link

  that’s my code for multi-level sub menus,

  header .wrap__nav .mainmenu { width: calc(100% – 0px); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; justify-content: center; align-items: center; }

  header .wrap__nav .mainmenu > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; justify-content: flex-end; width: 100%; margin: auto; }

  header .wrap__nav .mainmenu > ul li { margin: 0 10px; }

  header .wrap__nav .mainmenu > ul a { display: block; color: #ffffff; text-decoration: none; cursor: pointer; position: relative; -webkit-transition: all 0.4s ease 0s; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; -ms-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; display: inline-block; text-transform: uppercase; font-size: 1.3rem; font-weight: 500; letter-spacing: 0; }

  header .wrap__nav .mainmenu > ul a:hover, header .wrap__nav .mainmenu > ul a:active { -webkit-transform: translateY(-3px); transform: translateY(-3px); color: #ffffff; }

  header .wrap__nav .mainmenu > ul a:before { position: absolute; content: “”; height: 0px; width: 100%; left: 0; bottom: -2px; background-color: #ffffff; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -webkit-transform: scale(0); transform: scale(0); }

  header .wrap__nav .mainmenu > ul a:hover:before { height: 2px; -webkit-transform: scale(1); transform: scale(1); }

  header .wrap__nav .mainmenu li.has_submenu { position: relative; }

  header .wrap__nav .mainmenu li.has_submenu:before { left: 50%; border: solid transparent; content: ” “; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 5px; margin-left: -5px; bottom: -10px; -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)”; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; }

  header .wrap__nav .mainmenu li.has_submenu:hover:before { -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=$alpha*100)”; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; bottom: -10px; }

  header .wrap__nav .mainmenu li.has_submenu > ul { position: absolute; padding-top: 0px; margin-left: 0px; width: 380px; /width: 220px;/ padding-bottom: 0px; background-color: #ffffff; max-height: 0; overflow: hidden; transition: max-height 0.6s ease, padding 0.6s ease; z-index: 1000;}

  header .wrap__nav .mainmenu li.has_submenu > ul li { width: 100%; text-align: left; margin: 0; }

  header .wrap__nav .mainmenu li.has_submenu > ul a { width: 100%; padding: 5px 20px; color: #00b4b0; display: block; }

  header .wrap__nav .mainmenu li.has_submenu > ul a:before { width: 0; }

  header .wrap__nav .mainmenu li.has_submenu > ul a:hover { color: #333333; transform: translateY(0px); }

  header .wrap__nav .mainmenu li.has_submenu:hover > ul { max-height: 300px; padding: 10px; margin-top: 10px; display: block; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s linear 0s; }

  header .wrap__nav .mainmenu li.has_submenu > ul li.has_submenu > ul { position: absolute; top: 0px; left: 30%; width: 220px; background-color: #ffffff; max-height: 0; overflow: hidden; transition: max-height 0.6s ease, padding 0.6s ease; z-index: 1002; }

  header .wrap__nav .mainmenu li.has_submenu > ul li.has_submenu > ul a { width: 100%; padding: 5px 20px; color: #00b4b0; }

  header .wrap__nav .mainmenu li.has_submenu > ul li.has_submenu > ul a:hover { color: #333333; transform: translateY(0px); }

  header .wrap__nav .mainmenu li.has_submenu > ul li.has_submenu:hover > ul { max-height: 300px; padding: 10px; margin-top: 0px; transform: none; }