CSS Drop down menu - Sub Items appear to far right of Div - css

Question

I wanted to created a hoverable, drop-down menu for a html page. I created what I thought was correct HTML/CSS but the hover items appear on the far left side of the banner div. I've created a JSFIddle of the 'offending'code here: http://jsfiddle.net/4CCdv/2/
Html:
<div id="Header">
<p></p>
<ul class="Menu">
<li class="Menu">Home</li>
<li class="Menu" >Item2
<ul class="Menu">
<li class="Menu">Sub A</li>
<li class="Menu">Sub B</li>
<li class="Menu">Sub C</li>
</ul>
</li>
<li class="Menu" >Item 3
<ul class="Menu">
<li>Sub A</li>
<li>Sub B</li>
<li>Sub C</li>
</ul>
</li>
<li class="Menu" >Item 4
<ul class="Menu">
<li>Sub A</li>
</ul>
</li>
<li class="Menu" >Item4</li>
</ul>
</div>
CSS:
div {
border-radius: 5px;
}
#Header {
z-index: 1;
position: fixed;
width: 85.5%;
margin-top: 20px;
height: 95px;
color: white;
background-color: #0066ff;
margin-bottom: 15px;
text-align:center;
}
.Menu {
background-color: #2fa4e7;
background: linear-gradient(top, #2fa4e7 0%, #eee9f0 100%);
border-color: #1995dc;
border-radius: 8px;
border-style:ridge;
border-width:1px;
display: inline-block;
font-size: 1.2em;
font-family: Tahoma, Geneva, sans-serif;
list-style-type: none;
padding: 5px;
margin: 0.2em;
border-bottom: 2px solid #0024d9;
}
.Menu ul {
display: none;
}
.Menu li:hover > ul {
display: block;
font-size: 0.8em;
font-family: Tahoma, Geneva, sans-serif;
position: absolute;
top: -1px;
left: 100%;
}
I've been hammering at this for a while, but can't figure out why it would matter that there is a parent div or why the submenus try and appear outside of it. Any ideas?

Answer 1

Check out this demo. You have to give parent li position:relative and child ul position:absolute
CSS
ul.Menu li {
position: relative;
}
ul.Menu li:hover > ul {
display: block;
font-size: 0.8em;
font-family: Tahoma, Geneva, sans-serif;
position: absolute;
top: 35px;
left: 0;
}

Answer 2

You have to add relative position to the parent element of your hover. this way you can position child element according to parent not to whole page.
here it is:
.Menu li {
position:relative;
}
Now you can play with left, right, top, bottom to place your menu wherever you want