title: HTML/CSS Drop-down Menu Location
body: <p>I'm having issues with creating a drop-down menu with HTML&amp;CSS. I got the HTML part down (I think).</p>
  
  <pre><code>&lt;div id="Nav"&gt;
      &lt;ul&gt;
          &lt;li class="Navigation"&gt;&lt;a href="" class="Nav_Text"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="Navigation"&gt;&lt;a href="" class="Nav_Text"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li class="Navigation"&gt;&lt;a href="" class="Nav_Text"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li class="Navigation"&gt;
              &lt;a class="Nav_Text"&gt;Item 4&lt;/a&gt;
              &lt;ul class="sub-menu"&gt;
                  &lt;li class="Sub_Navigation"&gt;&lt;a href"" class="Sub_Nav_Text"&gt;Sub Item1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="Sub_Navigation"&gt;&lt;a href"" class="Sub_Nav_Text"&gt;Sub Item2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is what I have for the CSS</p>
  
  <pre><code>.submenu
  {
      display: none;
  }
  
  #Nav ul li:hover &gt; ul
  {
      display: block;
      position: absolute;
      /*The rest of the code is just for looks and doesn't effect the position*/
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you ahead of time.</p>