Question

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

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

CSS - 多列子菜单偏移问题

1 个答案: