html - 如何制作可点击框

我想将菜单“登录”中的元素之一设为可单击框（具有悬停效果）。我做了链接作为显示：块;但是还不够。

链接到屏幕截图：


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

         <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="#">[phone]</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;
}

最佳答案

您可以通过这种方式尝试（注释中的解释）：

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;
}