CSS - 多列子菜单偏移问题

Question

我创建了一个下拉菜单和一个多列子菜单。请查看 https://jsfiddle.net/fyrtpd7r/ 处的代码.如果将鼠标悬停在“元素 A”上，它看起来不错。但是如果你在元素 D 上，你可以看到子菜单中的第二列与顶部菜单不对齐。

body{
    background-color:#ddd;
}
nav{
    background:#eee;
}
.menu a{
    text-decoration:none;
}
ul.menu, ul.sub-menu, .col-menu{
    list-style:none;
}
ul.menu > li{ 
    display: inline-block;
    position:relative;

    box-sizing: border-box;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
}
ul.sub-menu{
    display:none;
    position:absolute;
    left: 0px;
    background-color: yellow;
    width: 100%;

    box-sizing: border-box;
    padding: 0;
    padding-left:20px;
    padding-right: 20px;
}
ul.menu > li:hover{
    background-color: red;
}
ul.menu > li:hover ul.sub-menu{
    display:block;
}

/* multi col */ 
ul.multi-col{
    width: 200px;
    background-color: green;
} 

ul.multi-col ul.col-menu{
    float: left;
    padding: 0;
    padding-right: 15px;
}

/* multi col - right align */ 
ul.multi-col.right-align{
    width: 200px;
    background-color: green;
    left: auto;
    right: 0;
} 

ul.multi-col.right-align ul.col-menu{
    float: right;
    padding: 0;
    padding-right: 0px;
    padding-left: 15px;
}

Answer 1

从您的 CSS 中删除这些样式。 摆脱类右对齐

/* multi col - right align */ 
ul.multi-col.right-align{
    width: 200px;
    background-color: green;
    left: auto;
    right: 0;
} 

ul.multi-col.right-align ul.col-menu{
    float: right;
    padding: 0;
    padding-right: 0px;
    padding-left: 15px;
}