title: how to have fix height when you hover over link
body: <p>This is not my actual code. I am creating drop down menu, but I had one problem so I deleted all the code, so I can have minimal code for my question.</p>
  
  <p>My problem is when I hover over my link, I am increasing the font size for anchor tag which is fine, but it also increasing the height for <code>li</code> element, which understandable. In short I know why it is happening, 
  I just want the solution. When I hover over my element I want to increase the font size, but not the size of <code>li</code> element, which is parent element. If you don't understand the problem just read the comment in CSS code.</p>
  
  <blockquote>
    <p>I only want to use css for the solution</p>
  </blockquote>
  
  <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>/*basic style no need to pay attention*/
  
  * {
    font-family: helvetica;
    margin: 0px;
    padding: 0;
    list-style-type: none;
  }
  
  .menu {
    display: flex;
  }
  
  .menu li {
    flex: 1;
  }
  
  ul ul li {
    display: flex;
  }
  
  .menu&gt;li a {
    background: black;
  }
  
  a {
    display: block;
    width: 100%;
  }
  
  
  /*
      ####
      increase the font size, but not the size for li
      ####*/
  
  a:hover {
    font-size: 26px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;li class="menu-item-has-children"&gt;&lt;a href="#"&gt;Services&lt;/a&gt;
      &lt;ul class="sub-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Plumbing&lt;/a&gt;&lt;/li&gt;
        &lt;li class="menu-item-has-children"&gt;&lt;a href="#"&gt;Heating&lt;/a&gt;
          &lt;ul class="sub-menu sub-menu2"&gt;
            &lt;li&gt;&lt;a href="#"&gt;Residential&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Commercial&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Industrial&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Electrical&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Pricing&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>