Adapting a HTML/CSS dropdown menu to multi-level - html

Question

Ive been trying to make the original dropdown into multi level for a site im working on. All of my attempts have failed (. For some reason i can only do "margin-right" to align the elements, and this causes some problems. I think it has something to do with the position attribute.
Here is my HTML:
<ol id="nav">
<li>Home</li>
<li class="dropdown_alignedLeft">
Products
<ul><li class="dropdown_alignedRight">
iPoP
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iPoP - Network Solutions for Vessels</li></ul><li class="dropdown_alignedRight">
Cameras
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>iCam 501 Ultra - Intrinsically Safe Digital Camera with Flash</li></ul><li class="dropdown_alignedRight">
BNWAS
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>BNWAS - Bridge Navigation Watch Alarm System</li></ul><li class="dropdown_alignedRight">
Lighting
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Peli 2690 - Intrinsically Safe LED Head Lamp</li></ul><li class="dropdown_alignedRight">
Communication
<ul style="margin-right:-400px; top:0px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;"><li>Ex-Handy 06 - Intrinsically Safe Cell Phone</li></ul>
</ul>
<li class="dropdown_alignedLeft">
Customers
<ul>
<li>Maritime</li>
<li>Non-Maritime</li>
<li class="dropdown_lastItem">Regulatory Organizations</li>
</ul>
<li>Product Enquiry</li>
<li>Contact Us</li>
<li class="dropdown_alignedLeft">
Company
<ul>
<!-- <li>About Us</li> -->
<li>News</li>
<li class="dropdown_lastItem">Press Releases</li>
</ul>
</ol>
And my CSS:
#nav {
float:right;
margin:15px 0 0;
}
#nav li {
float:left;
}
#nav li a {
display:block;
font-family:"PT Sans","Helvetica Neue",Arial,sans-serif;
font-size:16px;
text-decoration:none;
color:#2B95C8;
padding:10px 20px 20px;
}
.dropdown_alignedLeft,.dropdown_alignedRight {
position:relative;
}
#nav .dropdown_alignedLeft>a,#nav .dropdown_alignedRight>a {
background:url(../images/dropdown_arrow_blue.png) no-repeat top right;
padding:10px 30px 20px 20px;
}
#nav .dropdown_alignedLeft:hover>a,#nav .dropdown_alignedRight:hover>a {
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomright:0;
-moz-border-radius-bottomleft:0;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:0;
-webkit-border-bottom-left-radius:0;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
color:#FFF;
background:#2378A1 url(../images/dropdown_arrow_blue.png) no-repeat bottom right;
}
.dropdown_alignedLeft ul,.dropdown_alignedRight ul {
display:none;
}
#nav .dropdown_alignedLeft:hover>ul,#nav .dropdown_alignedRight:hover>ul {
display:block;
z-index:100;
position:absolute;
top:50px;
-moz-border-radius-topleft:0;
-moz-border-radius-topright:0;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-left-radius:0;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
background:#2378A1;
padding:0 0 6px;
}
#nav .dropdown_alignedRight:hover>ul {
top:50px;
right:0;
text-align:right;
}
#nav li ul li {
float:none;
border-bottom:1px dashed #2B95C8;
margin:0 20px;
}
#nav li ul li.dropdown_innerTitle {
border:none;
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:15px;
white-space:nowrap;
color:#C8DDE7;
margin:10px 20px 0;
padding:10px 0;
}
#nav li ul li.dropdown_lastItem {
border:none;
}
#nav li ul li a {
font-family:"Helvetica Neue",Arial,sans-serif;
font-size:13px;
color:#FFF;
white-space:nowrap;
padding:10px 0 9px;
}
#nav>li:hover>a,#nav li .current_page {
color:#2378A1;
background:url(../images/current_page_arrow_blue.png) no-repeat center bottom;
}
#nav li ul li a:hover {
color: #C8DDE7;
}
For a live version of the menu, please go here:
JSFiddle - Live Menu

Answer 1

You weren't closing a lot of your li tags and your submenu was just sort off flying off its container. Cleaned up your code and made too many modifications to list here:
http://jsfiddle.net/MmHSd/4/

Answer 2

http://purecssmenu.com/ Might help you out. Try downloading a list and taking a look at it. Deleting all the extra tags you have and take everything back to a basic list like this:
<ul>
<li>Element 1</li>
<li>Element 2</li>
<ul>
<li>
Element 2 Child 1
</li>
<li>
Element 2 Child 2
</li>
</ul>
and working back up to something a bit more complicated might help too.