如何制作可点击的盒子

Question

我想将菜单“Login”中的一个元素作为可点击框（具有悬停效果）。我把链接显示为：block;但还不够。

链接截图：

我在顶部和底部有蓝色边框的问题。如何将这些边框也作为可点击的框？

         <ul>
            <li><a href="#">Services</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Training</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Login</a></li>
            <li><a href="#">+48 123 456 789</a></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

您可以尝试这种方式（评论中的解释）：

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

试试这样：

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><a href="#">Services</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Training</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Login</a></li>
    <li><a href="#">+48 123 456 789</a></li>
  </ul>
</nav>