Html CSS导航边框

我想让导航看起来像这样，活动链接的边框需要看起来是蓝色的

现在使用下面的代码：

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-bottom: 2px;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}

我的导航如下所示：

---

听起来像是在考虑

边框底部

和

边框顶部

属性。您正在侦听

：hover

伪类，以检测鼠标是否位于链接上方。如果是，我们将添加一个蓝色边框

nav-ul{
列表样式类型：无；
}
李国荣{
显示：内联；
}
a{
文字装饰：无；
颜色：黑色；
}
a:悬停{
边框顶部：2件纯蓝；
底部边框：2件纯蓝；
}

您可以使用页边距顶部：-2px和页边距底部：-2px来解决问题： JSFIDLE上的工作示例：

---

请发布一个完整的代码示例，包括HTML。

.main-nav {
    list-style: none;
    text-align: center;
    border-bottom: 2px solid #d9d9d9;
    border-top: 2px solid #d9d9d9;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
    background-color: #ffffff;
    padding: 30px 10px;
    margin-top:-2px;
    margin-bottom:-2px;
    border-top: 2px solid #d9d9d9;
    border-bottom: 2px solid #d9d9d9;
}

.main-nav li a:link,
.main-nav li a:visited {
    color: #303030;
    text-decoration: none;
}

.main-nav li:active,
.main-nav li:hover {
    background-color: #f7f7f7;
    border-bottom: 2px solid #439ddc;
    border-top: 2px solid #439ddc;
}