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; 
}