Javascript 当父菜单项倾斜时，子菜单中是否有不需要的offest？

基本上，我有一个生成“全宽”巨型菜单的插件，此外，菜单项使用CSS3 2D转换：

ul.menu {
     transform: skewX(-30deg);
}

ul.menu > li > ul.sub-menu {
    /* Do not skew sub menus */
    transform: skewX(30deg);
}

问题是不同的子项有不需要的偏移量，我想修复它

可以在此处看到该错误：

仅供参考，该插件使用JS来确定子菜单的绝对位置，因此我的想法是使用

marginleft

property t来调整位置，但它没有按预期工作

$('.fmm-main > li').each(function() {
        var degrees = 30;

        var item = $(this);
        var menu = item.parent();
        var subm = item.children('ul');

        if(!subm.length) return;

        // Convert degrees to radians.
        var menu_radians = degrees * (Math.PI / 180);
        var subm_radians = (degrees / 2) * (Math.PI / 180);

        var menu_h = parseInt(menu.css('height'), 10);
        var subm_h = parseInt(subm.css('height'), 10);

        // We need to factor these in to get an accurate offset.
        subm_h += parseInt(item.css('height'), 10);
        subm_h += parseInt(item.css('padding-top'), 10);
        subm_h += parseInt(item.css('padding-bottom'), 10);
        subm_h += parseInt(subm.css('top'), 10);

        // Get skew offsets.
        var menu_offset = menu_h * Math.atan(menu_radians);
        var subm_offset = subm_h * Math.atan(subm_radians);

        // Put everything together.
        var offset = (subm_offset - menu_offset);

        subm.css('marginLeft', offset);

    });

---

有什么建议吗？

我不能100%确定您希望菜单对齐的位置，所以如果需要调整一下，请告诉我

使用当前设计，尝试以下CSS：

ul.menu {
     transform: skewX(-30deg);
     transform-origin: 0 50%;
}

ul.menu > li > ul.sub-menu {
    /* Do not skew sub menus */
    transform: skewX(30deg);
     transform-origin: 0 0;
}

---

然后，即使在页面边缘，菜单也将位于固定位置，并且倾斜的菜单位于页面的中心。

能否在代码片段中提供一个最小的工作示例？如果没有HTML和CSS，很难看出问题出在哪里。看看你提供的屏幕盖，在我看来，你完全可以定位子菜单，并将这些计算一起去掉。你为什么不这么做？看看这个，可能会有帮助：。。。。我想你需要它左对齐，而不是默认的中心对齐！实际上，它是一个高级WP插件，所以创建一个fiddle并不是那么容易。无论如何，您可以在此处看到测试环境：