title: CSS positioning relative to an absolute positioned element
body: <p>I have an HTML5 page, which has a <code>&lt;header&gt;</code> element containing the <code>&lt;nav&gt;</code> section. </p>
  
  <p>Due to the style and design of the overall header, the nav is <strong>absolutely</strong> positioned within the header, which is itself  <strong>relative</strong>ly positioned.</p>
  
  <p>This works perfectly for anchors <code>&lt;a&gt;</code> for which it was originally intended. However, I now have need to add a drop-down menu and am using this one:</p>
  
  <p><a href="http://webdesignerhut.com/css-dropdown-menu/" rel="nofollow noreferrer">http://webdesignerhut.com/css-dropdown-menu/</a>
  and
  <a href="https://stackoverflow.com/questions/29732488/how-to-get-a-drop-down-menu-to-overlay-other-elements">How to get a drop-down menu to overlay other elements</a></p>
  
  <p>But the issue with this and any other CSS dropdown menus that I have found is that they require the parent element to be <strong><em>relatively</em></strong> positioned, but I can't mark the parent <code>&lt;nav&gt;</code> as being both relative <em>and</em> absolute. I am also finding similar CSS requirements with my investigation of <code>jQuery</code> alternatives.</p>
  
  <p>Markup:</p>
  
  
  
  <pre><code>&lt;html&gt;
    &lt;header&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a&gt;menu option&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a&gt;menu option&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a&gt;submenu option&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  
    &lt;main&gt;
      ...
    &lt;/main&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS (simplified, this works for non-dropdown selection)</p>
  
  
  
  <pre><code>header {
    position: relative;
  }
  
  nav {
    position: absolute;
  }
  </code></pre>
  
  <p>CSS (required by dropdowns)</p>
  
  <pre><code>nav {
    position: relative;
  }
  
  nav ul {
    position: absolute;
  }
  </code></pre>
  
  <p>So how can I make the <code>nav</code> element act as a <code>position:relative</code> to its children but act as a <code>position:absolute</code> to its parent? </p>
  
  <h2>EDIT</h2>
  
  <p>Here is a fiddle trying to outline what's going on. 
  <a href="https://jsfiddle.net/8j9z8wak/" rel="nofollow noreferrer">https://jsfiddle.net/8j9z8wak/</a></p>
  
  <p>It seems the original cause is that the <code>header</code> element (of which <code>nav</code> is a child) has <code>overflow:hidden</code> which helps with resizing on mobile devices and variable screen sizes with floating images on the top left corner of the header image. </p>
  
  <p>I currently on the fiddle have tried to play with <code>overflow-x</code> and <code>overflow-y</code> but this results in scrollbars and not the intended overflow that works with removing <code>overflow:hidden</code> </p>
  
  <p>re  (just for your info.) : There are a lot of CSS / HTML parts to the fiddle, the issue is not the bare bones of the navigation but the way it fits with these other parts, so I've kept them in.</p>
  
  <p>I have the <code>nav</code> as a child of <code>header</code> and I need the header to use <code>overflow:hidden</code>, but <code>nav</code> CSS menu works as intended without <code>overflow:hidden</code>. </p>
  
  <ul>
  <li><p>I have retained media queries as the <code>overflow:hidden</code> is required for smaller screen size handling. </p></li>
  <li><p>The navigation menu elements have a floating pair of parts that centre the float as found from <a href="https://stackoverflow.com/a/21508512/3536236">https://stackoverflow.com/a/21508512/3536236</a> . This was applied just for today because all dropdown menu systems use floating elements, and they need to be centred. </p></li>
  </ul>