Magento 上的 Mega Menu 问题

Issue with Mega Menu on Magento

site link

上的 megamenu 有 1 个问题

screenshot

有时下拉菜单会向右移动。 chrome 和 firefox 都会发生这种情况。

这不是一个经常发生的问题,只是有时会发生。

我认为这可能是一个 css 问题,因为每当它发生时,我检查带有 chrome css 扩展名的元素..自动将框移动到正确的位置不刷新

附上megamenu代码

$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
    var menucontent = $(this).find(".mega-content-wrap:first");
     var li = $(this);

    if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
        menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
    }
});
$(window).resize(function(){
    setTimeout(function(){
        $('.sns-megamenu-wrap').find('li').each(function(){
            var menucontent = $(this).find(".mega-content-wrap:first");
             var li = $(this);

            if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
                menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
            }
        });
      }, 200);
});

});

主题是sns korion

我检查了你的css。您正在处理可见性和不透明度的可见性切换。选一个。在这种特殊情况下,我会选择不透明度,因为你是 运行.

的过渡

此外,您的带缩放变换 css 将下拉菜单放置在不同的位置,并使用缩放将它们按大小放置在正确的位置。但是,与此技术相矛盾的是,您随后将过渡设置为 none。如果关键帧意外停止,这都是后退定位,会弄乱显示。

因此请删除主题灯中第 6599 行中的所有过渡green.css 以及相同样式表中第 6462 行中的所有过渡和转换。

同时删除两条线的可见性和 6599 中的不透明度。(您已经在 6462 中拥有它。

祝你好运