Question

我正在创建一个像亚马逊这样的多级别大型菜单，但在设计和视角方面有所不同。我面临的问题是，一旦我将鼠标悬停在一个子菜单项上，相关菜单项的定位就无法正确显示。如果我将鼠标悬停在另一个项目上，则定位略低于前一个项目。

此外，我正在使用外部js资源。请检查小提琴中的外部资源。

我希望第二级子菜单项位于其中并正确放置在另一个之上。而这更深层次。

    #menu li .align_right {
    position: relative;
    top: 1%;
    left: 350%;
}
#menu li:hover .align_right {
    top: 1%;
    left: 350%;
    position: relative;
}

现在，即使我对相对定位使用绝对值，但是li项目也没有正确对齐。此外，我无法使用position: fixed;因为它会在滚动甚至一点点时浮动在网页上。

js fiddle link http://jsfiddle.net/neerajsonar/hzoyddhs/

结果全屏 - http://jsfiddle.net/neerajsonar/hzoyddhs/embedded/result/

Answer 1

快速浏览一下，我看到你的CSS移动了 350％。将其更改为 350px ，它会将子菜单保留在您想要的主区域中。

#menu li:hover .align_right {
background: #94A6CE;
top: 1%;
left: 350px;
position: relative;
}

html css定位不起作用

1 个答案: