title: Does display:none perform better then height:0?
body: <p>we're planning a bit of a redesign of a project of us. One focus is on performance. Especially with that in mind I sketched 2 different UI-options and I'd like to know which one'll cost the user less CPU-power/runs smoother?
  So classic scenario with a horizontal navigation group like</p>
  
  <pre><code>&lt;nav&gt;&lt;ul&gt;&lt;li&gt;Foo&lt;/li&gt;&lt;li&gt;Products&lt;/li&gt;&lt;li&gt;News&gt;&lt;/li&gt;&lt;li&gt;Contact&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;
  </code></pre>
  
  <p>and some hidden submenus therefore, like</p>
  
  <pre><code>&lt;section class="submenu_products"&gt;
  &lt;h3&gt;some content&lt;/h3&gt;&lt;p&gt;some content&lt;/p&gt;
  &lt;ul&gt;
  &lt;li&gt;Sub-Product&lt;/li&gt;
  &lt;li&gt;Sub-Product 1&lt;/li&gt;
  &lt;li&gt;Sub-Product 2&lt;/li&gt;
  &lt;li&gt;Sub-Product 3&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>with <strong>scenario 1</strong>:</p>
  
  <pre><code>.submenu_products{
  z-index:5;
  display:none;
  position:absolute;
  top:20px;
  }
  </code></pre>
  
  <p>and I'd show it with detecting the hover on the appropriate trigger and edit the css by hovering this to display:block; </p>
  
  <p>or <strong>scenario 2</strong>:</p>
  
  <pre><code>.submenu_products{
  display:none;
  height:0;
  }
  </code></pre>
  
  <p>and I'd show it with detecting the hover on the appropriate trigger and edit the css by hovering this to height:300px; transition:0.5s;</p>
  
  <p>Now I am wondering which of these solutions would be the most performant ones and how can I detect something like this by myself?</p>
  
  <p>For displaying both of the solutions I'd use either jquery or vanilla JS, no pure css-solution - so it's not the question what is a better alternative but simply which of the twos (or an optimized thing of the twos) is the more performing one.</p>
  
  <p>Thanks!</p>