title: Make link same height as parent
body: <p>It seems that adding</p>
  
  <pre><code>a {
      display: block;
      height: 100%
  }
  </code></pre>
  
  <p>doesn't make a link the same size as the parent (<code>li</code> in this case).</p>
  
  <pre><code>.navbar-nav &gt; ul &gt; li {
      display: inline-block;
      line-height: 70px;
      height: 100%;
      padding-left: 20px;
      padding-right: 20px;
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  html,
  p {
    color: #333333;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    margin: 0px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500
  }
  .nav {
    background-color: #FF8F2E;
    height: 70px;
    margin-top: 0px;
  }
  .navbar-nav {
    text-align: right;
    position: relative;
    height: 100%;
  }
  .navbar-nav &gt; ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 70px;
    display: block;
  }
  .navbar-nav &gt; ul &gt; li {
    display: inline-block;
    line-height: 70px;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar-nav &gt; ul &gt; li:hover {
    background-color: #F27000;
  }
  .navbar-nav &gt; ul &gt; li &gt; a {
    color: inherit;
    text-decoration: none;
    pointer-events: none;
  }
  .brand {
    margin-left: 20px;
    color: #fff;
    display: block;
    position: absolute;
  }
  .brand &gt; h2 {
    display: inline-block;
    line-height: 70px;
  }
  .brand-inverse {
    color: #333333;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="nav navbar"&gt;
    &lt;div class="brand brand-inverse"&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="navbar-nav"&gt;
      &lt;ul&gt;
        &lt;li class="no-link"&gt;&lt;a href=""&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="no-link"&gt;&lt;a href=""&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="no-link"&gt;&lt;a href=""&gt;Documentation&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is the only thing that I think can affect this.</p>
  
  <p>How can I make the <code>a</code> inside a <code>li</code> inherit the height of its' parent?</p>