How to make clickable box - html

Question

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.
Link to screenshot:
I've problem with blue borders on top and bottom. How to make these borders also as clickable box?
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li>
<li>[phone]</li>
</ul>
CSS:
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;
}

Answer 1

You can try in this way (explanations in comments):
nav li
{
/*padding: 7px 0;*/
}
ul a
{
color: #006db6;
text-decoration: none;
padding: 7px 0; /* moved from li */
background-clip: content-box; /* background only for content, without padding */
}
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;
}

Answer 2

Try like this:
nav {
float: left;
}
ul {
list-style-type: none;
text-align: center;
}
ul a {
color: #006db6;
text-decoration: none;
padding: 6px 0;
background-clip: content-box;
}
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;
}
<nav>
<ul>
<li>Services</li>
<li>Pricing</li>
<li>Training</li>
<li>About</li>
<li>Login</li>
<li>[phone]</li>
</ul>
</nav>