html css定位不起作用

我正在创建一个像amazon一样的多级大型菜单，但设计和视角不同。我面临的问题是，一旦我将鼠标悬停在一个子菜单项上，相关菜单项的位置就不能正确显示。如果我将鼠标悬停在另一个项目上，则定位位置比前一个位置稍低。html css定位不起作用

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

我想要里面的第二级子菜单项，并正确放置一个在另一个之上。这更深入一层。

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

现在，即使我使用绝对的相对定位，李项目没有正确对齐。另外，我不能使用position: fixed;，因为即使滚动一下，它也会浮动在网页上。

爵士小提琴链接http://jsfiddle.net/neerajsonar/hzoyddhs/

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

来源

2015-05-12 neeraj.sonar

相关代码必须张贴在问题本身 –

是的，我仍然在写这个问题。它错误地张贴了。我在编辑它。 –

只要有一个快速浏览一下我看到你的CSS移动它离开350％。将其更改为350px它会将子菜单保留在所需的主区域中。

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

来源

2015-05-12 12:03:50 AngularJR

谢谢你的回复。它确实有帮助，检查这个小提琴http://jsfiddle.net/neerajsonar/hzoyddhs/ 现在会发生的是，特定的子菜单项li显示在其父母的相同位置。我不想那样。你可以看到小提琴并找出它的缺陷。第二个子菜单项li显示在前面，这很好，我不介意只要它完全隐藏了前一个。 –

您好，每个子菜单都应该在鼠标悬停和鼠标悬停时显示和隐藏。似乎用于'amazonmenu'的jquery允许它显示，但不会在mouseout上删除它。先看看这个区域，让它正常工作，然后继续下一个问题。那小提琴链接仍然使用350％而不是350px。 – AngularJR

html css定位不起作用

回答

相关问题