css - 如何正确定位 Wordpress 子菜单(左 : auto;) not working

Question

在 this site ，我们在培训下有一个临时子菜单。

不幸的是，子菜单的 left: auto; 将其定位在 UL 的左侧。

其他网站我们使用此 CSS 规则将 .sub-menu 放置在父级 LI 的左侧。

我们怎样才能使 Training 的 .sub-menu 与 Training 父 LI 保持一致？

Answer 1

在您的代码中进行以下 2 处更改，您的子菜单将与父级 li 的左侧对齐:

更改以下代码:

.responsiveSelectFullMenu .menu-item:hover {
position:static;
}

到:

.responsiveSelectFullMenu .menu-item:hover {
position:relative;
}

和

.responsiveSelectFullMenu .menu-item:hover > .sub-menu {
left:auto;
}

到

.responsiveSelectFullMenu .menu-item:hover > .sub-menu {
left:0;
}

希望对你有帮助。

更新:

对于二级菜单，更新代码如下:

.responsiveSelectFullMenu .menu-item:hover > .sub-menu {
   left: 0;
   top: 100%;
}
.responsiveSelectFullMenu .menu-item .menu-item:hover > .sub-menu {
   margin: 0;
   left: 110px;
   top: 0;
}
.responsiveSelectFullMenu li:last-of-type .sub-menu a {
   margin-left: 0
}