title: Menu items change their positions in html/css menu when expanding submenu
body: <p>I have a simple menu made in html/css and the problem I encountered is that if I put my mouse pointer over menu item (test2) to expand submenu then other items from menu section (test1) change their positions: <a href="https://jsfiddle.net/dsb87pxz/" rel="nofollow noreferrer">https://jsfiddle.net/dsb87pxz/</a></p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;test1&lt;/li&gt;
      &lt;li&gt;
        test2
        &lt;ul&gt;
          &lt;li&gt;test2.1&lt;/li&gt;
          &lt;li&gt;test2.2&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  
  nav &gt; ul &gt; li {
    display: inline-block;
  }
  
  nav &gt; ul &gt; li &gt; ul {
      display: none;
  }
  
  nav &gt; ul &gt; li:hover &gt; ul {
      display: block;
  }
  
  nav &gt; ul &gt; li &gt; ul &gt; li {
    display: block;
  }
  </code></pre>
  
  <p>Can you suggest a solution for this problem?</p>