向左移动菜单下拉菜单 [英] move menu dropdown to left

问题描述

我有一个带有下拉菜单的导航菜单(子菜单)，并且下拉菜单位于主菜单的右侧.

I have top menu with drop down navigation(sub menu) and drop down comes right side of main menu.

css:

ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}

因为如果我将鼠标悬停在上一个菜单上，那么下拉菜单将随水平滚动一起出现，因为右侧没有空间来显示菜单，因此如何更改上一个菜单的左侧位置?

How can change position to left for a last menu because if i hover on last menu, drop-down comes with horizontal scroll because there is no space on right side to display menu?

请帮助

推荐答案

ul.dropdown li {
   position: relative;
}

ul.dropdown li ul {
   position: absolute;
   top: 20px; /* assign the correct value of the top line height */
   left: 0px;
}

这应该工作^^将 position:absolute; 分配给具有 position:relative 的元素的子元素时，绝对位置相对于其父元素而不是相对于其父元素身体.

This should work^^ When assigning position:absolute; to an child element of an element with position:relative the absolute positioning is relative to its parent and not to the body.

我的错，以某种方式用最后一个孩子"覆盖了最后一部分.

My fault, somehow overread the last part with "last child".

这可能有效:

ul.dropdown li:last-of-type ul {
   position:absolute;
   left:0px;
}

这篇关于向左移动菜单下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！