How do I make a dropdown submenu appear next to its parent - html

Question

I have a menu that includes a sub menu which to most parts works well. However, when you click an item in the menu, the sub menu opens but is not lining up next to the item selected. It just stays as the top next to the main menu.
It is rather difficult to explain, so I posted code on as a snippet and would would apprecite it if someone could point out my error. Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
}
.navigation li:hover > ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover > ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>

Answer 1

Add position: relative to .navigation ul li.
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0 0 0 16px;
background: rgb(58, 58, 58);
font-size: 16px;
}
.navigation li {
float: left;
}
.navigation li:hover {
background: #1a4655;
}
.navigation li:first-child {
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 0 0 5px;
}
.navigation li a {
display: block;
padding: 0 20px;
text-decoration: none;
line-height: 40px;
color: #fff;
}
.navigation ul {
display: none;
position: absolute;
list-style: none;
margin-left: -3px;
padding: 0;
}
.navigation ul ul {
left: 100%;
top: 0;
width: 250px;
border-bottom-left-radius: 0 !important;
}
.navigation ul li {
float: none;
position: relative;
}
.navigation li:hover>ul {
display: block;
background: #1a4655;
/* border: solid 3px #fff;*/
border-top: 0;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
position: absolute;
width: 250px;
}
.navigation li:hover>ul li:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.navigation li li a:hover {
background: #0c323f;
color: white;
}
.navigation ul li:last-child a,
.navigation ul li:last-child a:hover {
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
<div class="menu">
<ul class="navigation">
<li>Home</li>
<li>Requests
<ul>
<li>Boxes
<ul>
<li>Add Box(es)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent Retrieval</li>
</ul>
</li>
<li>Files
<ul>
<li>Add File(s)</li>
<li>Retrievals</li>
<li>Returns</li>
<li>Destructions</li>
<li>Permanent File Retrieval</li>
</ul>
</li>
<li>Recycle Collection
<ul>
<li>Sacks</li>
<li>Boxes</li>
</ul>
</li>
<li>Box Supply</li>
<li>Sack Supply</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>