title: inline-block nowrap resize issue
body: <p>I have being trying to make a nowrap navigation with CSS however when I hover over  the parent list for lack of a better description jumps
  HTML</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> html { 
        overflow-x: hidden;
      }
      ul li{
          list-style:none;
      }
      nav{
          margin: 0 -9999rem;
          padding: 0.25rem 9999rem;
          height:40px;
          background-color:white;
        overflow:hidden;
      }
  
      nav .user-nav{
          position:absolute;
          white-space:nowrap;
      }
      nav .user-nav &gt; li{
            display: inline-block;
          margin: 0 10px;
      }
  
      nav .user-nav li a{
          text-decoration:none;
          color:black;
      }
  
      nav .user-nav li a:hover{
          color:red;
      }
      nav .user-nav &gt; .interact li{
          display:none;
          background-color:white;
          padding:10px;
      }
      nav .user-nav &gt; .interact:hover li{
          display:block;
      }
  
      nav .user-nav &gt; .interact li:hover{
          color:red;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
          &lt;ul class="user-nav"&gt;
              &lt;li&gt;&lt;a href=""&gt;Reccent reviews&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=""&gt;Reccent addtions&lt;/a&gt;&lt;/li&gt;
              &lt;li class="interact"&gt;&lt;a href=""&gt;Login/Register&lt;/a&gt;
                  &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Login&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Register&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I added it to a fiddle below </p>
  
  <p><a href="https://jsfiddle.net/23e5aLp2/" rel="nofollow noreferrer">https://jsfiddle.net/23e5aLp2/</a></p>
  
  <p>I initially done it with a float however since reading a bit more I found inline-block is the better option, the problem is as I mentioned the parent list seems to jump when hover over the drop down menu </p>