Mega Menu layout

can you try this to see if it fits your needs – we had to use the flex model to style it:

#top #header .avia_mega_div {
    max-height: calc(100vh - 200px);
    overflow: auto !important;
}

#top #header .avia_mega_div > .sub-menu {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

#header .avia_mega_div .units {
  border-right: 4px solid #010660 ;
}

#header .avia_mega_div .avia_mega_menu_columns_first {
  padding-left: 15px;
  border-left: 4px solid #010660;
}

#header .avia_mega_div .avia_mega_menu_columns_last {
  border-right: 4px solid #010660;
}

• the max-height is necessary for example for ipad – that mega menu is scrollable inside.
• the stretch makes the columns inside the same height – so the borders can have the same length
• if you don’t liike the left border on first row and right border on last element – get rid of the last two rules

hope that it looks this way then:

that rule here:

#top #header .avia_mega_div {
    max-height: calc(100vh - 200px);
    overflow: auto !important;
}

is for scrollable mega menu.
If the height of the mega div is more than the screen-height the overflow is on .
you can play a bit with the value 200px 50px seems to be enough

on insertion into functions.php : replace it with:

function insert_mega_div_separator() { 
?>
<script>
(function($){
$('<div style="margin-bottom:10px;" class="hr hr-custom hr-center"><span class="hr-inner inner-border-av-border-fat" style=" width:80%; border-color:#010660;"><span class="hr-inner-style"></span></span></div>').insertBefore('.avia_mega_hr');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_mega_div_separator');

this has influence to the lines – add or change the existing rules to:

#top #header .avia_mega_div > .sub-menu {
padding: 20px 30px 10px;
}

.hr-custom .hr-inner.inner-border-av-border-fat {
    border-top-width: 1px;
}

#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

Well, I almost had to help with that, didn’t I? ;)
now i’m out sorry – the next patient is already waiting.

btw: chrome on pc got the advantage that you can let the dropdown menus open when exploring them with a shortcut
believe it is F8

Safari on Mac did the trick without shortcut.

this was the screenshot you gave me as you would like tlo have it:
my comment :

this has influence to the lines – add or change the existing rules to:

add new rules gave to you – change existing ones gave to you!

    ⇒         your last screencast

so all have right border – except the first row last column
where is that rule gone:

#header .avia_mega_div .units {
  border-right: 1px solid #010660 ;
}

On your screen there are no left lines to the first Columns

/* Nascondere per nascondere barra sinistra delle categorie OK */
#header .avia_mega_div .avia_mega_menu_columns_first {
    padding-left: 15px;
    border-left: none;
}

so you don’t like the border on the upper row right side – where is the new rule with the :not instruction:

#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

what do you think of those rules above could handle bullets ?

.avia_mega_div .avia-bullet {
  …
}

the border top, bottom, left creates that triangle (old trick to have a triangle in pure css)
but maybe the margin-top ? change your child-theme rule to

/* Size bullets mega menu ok */
.avia_mega_div .avia-bullet {
  margin-top: 6px;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 6px solid #6e6d75;
}

didn’t you like to get rid of outer lines ?

/* Nascondere per nascondere barra sinistra delle categorie OK */
#header .avia_mega_div .avia_mega_menu_columns_first {
    padding-left: 15px;
    border-left: none;
}

/* Nascondi per nascondere la barra di destra delle categorie solo in alto OK */
#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

then it will look like this