CSS change height on :hover
<p>I am trying to change the height and position of an anchor <code>&lt;a&gt;</code> on hover.  </p>

<p>The CSS I am using is:</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>    .options {
     background: linear-gradient(#FFFFFF, #dbe2e8);
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 115px;
  height: 35px;
  border: 1px solid black;
  border-bottom: none;
  border-radius: 8px 8px 0px 0px;
  -moz-border-radius: 8px 8px 0px 0px;
 }

    .options:hover {
        height: 39px;
  top: -4px;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#" class="options"&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>I must be doing something wrong.  I have tried the :hover part with just the <code>top: -4px;</code> and this works, however the <code>height: 39px;</code> does nothing.  </p>

<p>Thanks</p>