CSS skewX属性导致基础下拉菜单出现问题

Question

我正在努力提高菜单项的最高级别[成功] - 我设法正确地将li和标签排成一行，但是ul.dropdown正在其余的文档元素下弹出，这样就可以了向右偏移 - 每个下拉列表具有不同的偏移量。它似乎也有一些透明度。

小提琴在这里：https://jsfiddle.net/acto8k5y/5/

• 你必须打开小提琴才能看到无响应的菜单
• 所有自定义菜单CSS都位于css面板的最底部

这就是我正在使用的偏斜部分：

Qt.Qt.AlignCenter.

这是什么问题？

Answer 1

如果您有选择地禁用子菜单ul上的反向倾斜，您会注意到ul与每个菜单项下方的彩色条对齐。似乎ul元素上的偏斜在元素的底部具有变换原点，其效果是它被向右推到可见位置。

如果你想要倾斜的唯一元素是每个菜单项下面的彩色条，你可能最好用伪元素替换偏斜transform以创建斜角：

.top-bar-section .has-dropdown::before {
    position: absolute;
    bottom: -10px;
    left: -10px;
    display: inline-block;
    content: "";
    width: 5px;
    height: 5px;
    border: 5px solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.top-bar-section .has-dropdown::after {
    position: absolute;
    right: -10px;
    display: inline-block;
    content: "";
    width: 5px;
    height: 5px;
    border: 5px solid;
    border-top-color: transparent;
    border-right-color: transparent;
}
.top-bar-section .health {
    color: #00adeb;
}
.top-bar-section .family {
    color: #3ab652;
}
.top-bar-section .community {
    color: #f59334;
}
.top-bar-section .has-dropdown > a {
    color: #000;
}

虽然CSS稍微复杂和冗长，但这意味着叠加的转换更少，并且还会减少客户端浏览器的图形负载。使用此CSS，下拉菜单相对于原始菜单项定位。

请参阅https://jsfiddle.net/acto8k5y/6/。