title: How to make clickable box
body: <p>I want to make one of my element in menu "Login" as clickable box (with hover effect). I made link as display: block; but there is not enough.</p>
  
  <p>Link to screenshot:<br>
  <a href="https://i.stack.imgur.com/snENF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/snENF.png" alt="Link to screenshot"></a></p>
  
  <p>I've problem with blue borders on top and bottom. How to make these borders also as clickable box?</p>
  
  <pre><code>         &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&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;Training&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Login&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;+48 123 456 789&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav li
  {
      padding: 7px 0;
  }
  
  ul a
  {
      color: #006db6;
      text-decoration: none;
  }
  
  ul li:nth-child(5)
  {
      background-color: #006db6;
      width: 100px;
      margin: 0 auto;
      border-radius: 5px;
  }
  
  ul li:nth-child(5) a
  {
      color: #FFF;
      display: block;
  }
  
  ul li:nth-child(5) a:hover
  {
      color: #006db6;
      background-color: #FFF;
  }
  </code></pre>