javascript - html css positioning not working -

i creating multi-level mega menu amazon different in design , perspective. problem facing once hover on 1 sub-menu item positioning of relative menu items not displayed properly. , if hover on item positioning bit below previous one.

also using external js resource. please check external resource in fiddle.

i want 2nd-level sub menu items inside , correctly placed 1 above other. , goes 1 more level deeper.

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

now if use absolute relative positioning, li items doesn't align properly. can't use position: fixed; because float on web-page when scrolled little bit.

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

result full screen - http://jsfiddle.net/neerajsonar/hzoyddhs/embedded/result/

just having quick see css moves left 350%. change 350px , keep sub menu in main area want it.

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