css - CSS ドロップダウン メニュー - サブ項目は Div の右端に表示されます

Question

HTML ページのホバー可能なドロップダウン メニューを作成したいと考えていました。正しい HTML/CSS と思われるものを作成しましたが、バナー div の左端にホバー アイテムが表示されます。ここで「問題のある」コードのJSFIddleを作成しました：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%;
}

私はしばらくこれに取り組んできましたが、親 div があることが問題になる理由や、サブメニューがその外側に表示されようとする理由がわかりません。何か案は？