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