title: How to get a html element to overlap another when it is displayed?
body: <pre><code>#nav ul ul li {
      display: block;
      font-color: blue;
      font-size: 1.5em;
      z-index: 1;
      position: relative;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/h8Akr.png" alt="Current output">
  For example, I have a mobile responsive site, and the main menu works fine, but when I resize the browser window to be small, to replicate a small screen such  as a mobile phones.... One of the main menu items that has a drop down list gets displayed on top of the other main menu items. This means that the main menu drop down items are displayed on top of some main menu text directly underneath!</p>
  
  <p>I have done z index so the drop down menu does sit on top, but the problem is, even though it sits on top, the main menu underneath is still displayed.</p>
  
  <p>This is the <a href="https://jsfiddle.net/jjfff0r4/" rel="nofollow noreferrer">jsfiddle</a></p>