HTML/CSS Drop-down Menu Location

I'm having issues with creating a drop-down menu with HTML&CSS. I got the HTML part down (I think).

<div id="Nav">
    <ul>
        <li class="Navigation"><a href="" class="Nav_Text">Item 1</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 2</a></li>
        <li class="Navigation"><a href="" class="Nav_Text">Item 3</a></li>
        <li class="Navigation">
            <a class="Nav_Text">Item 4</a>
            <ul class="sub-menu">
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item1</a></li>
                <li class="Sub_Navigation"><a href"" class="Sub_Nav_Text">Sub Item2</a></li>
            </ul>
        </li>
    </ul>
</div>

Here is what I have for the CSS

.submenu
{
    display: none;
}

#Nav ul li:hover > ul
{
    display: block;
    position: absolute;
    /*The rest of the code is just for looks and doesn't effect the position*/
}

The issue that I'm having is that the drop-down menu is not showing up underneath Item 4, but instead at the far left of the screen. Can anyone help me with positioning the drop-down menu underneath Item 4? And not by setting a margin. I tried that, and when the screen resized, the drop-down menu was off alignment.

Thank you ahead of time.