i solved it the following way, just for info:
#{$wrap} #{$menu} {
/** Custom styles should be added below this line **/
li.mega-menu-item:first-child a{
@include border-radius($container_border_radius_top_left, 0, 0, 0);
}
li.mega-menu-item:last-child a {
@include border-radius(0, $container_border_radius_top_right, 0, 0);
}
ul.mega-sub-menu li.mega-menu-item:first-child {
@include border-radius(0, 0, 0, 0);
}
ul.mega-sub-menu li.mega-menu-item:first-child a {
@include border-radius(0, 0, 0, 0);
}
ul.mega-sub-menu li.mega-menu-item:last-child {
@include border-radius(0, 0, 10px, 10px);
}
ul.mega-sub-menu li.mega-menu-item:last-child a {
@include border-radius(0, 0, 10px, 10px);
}
li.mega-current-menu-ancestor, li.mega-current-menu-ancestor a:hover, ul.mega-sub-menu li.mega-current-menu-item a{
background: red!important;
}
li.mega-current-menu-item:first-child a {
@include border-radius($container_border_radius_top_left, 0, 0, 0);
background: red;
}
li.mega-current-menu-item:last-child a {
@include border-radius(0, $container_border_radius_top_right, 0, 0);
background: red;
}
}
#{$wrap} {
clear: both;
}
actually, this is something that every menu should have:
– current menu highlighted, including the submenu. it is nothing special.
– also the rounded corners, at the top ends of the menu and at the bottom of the submenu.
!tom, you could think about including this option in the admin area…
thanks anyway, a nice plugin…
if someone has a better or optimized idea…
