Dropdown sub menu not showing as expected - html

Question

I am trying to create a sub menu in a html navigation menu. The menu is appearing but it is showing in the menu list instead of to the right. I have made a screenshot of the problem and would be grateful if someone could help me adapt my code.
You will see from the screenshot, that the sub menu is appearing in the main menu and not off to the right of the selected link.
I have tried so many options that I need to turn to the experts for help.
Many thanks
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
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;
overflow: hidden;
}
.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;
}
.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>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
<li>Control Panel</li>
<li>Logout</li>
</ul>
<div class="clear"></div>
</div>
Image screenshot
Normal dropdown
Sub menu showing problem

Answer 1

Use top:0 and left:100% to the 2nd level submenu
Stack Snippet
.menu {
width: 100%;
height: 40px;
margin: 0;
padding: 0;
background: #0c323f;
position: static;
}
.navigation {
list-style: none;
padding: 0;
margin: 0;
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;
}
.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;
}
.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>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
</ul>
</li>
<li>Files</li>
<li>Recycle</li>
<li>Box Supply</li>
<li>Recycle</li>
<li>Destruction</li>
<li>Destruction Schedules</li>
</ul>
</li>
<li>Reports</li>
<li>Invoices</li>
</ul>
<div class="clear"></div>
</div>