Html CSS导航边框

Question

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

现在使用以下代码：

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

我的导航如下：

Answer 1

你可以使用margin-top：-2px和margin-bottom：-2px来解决你的问题： 关于jsfiddle的工作示例：https://jsfiddle.net/jqsg0sLa/

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

Answer 2

听起来您正在考虑border-bottom和border-top属性。您正在侦听:hover伪类，以检测鼠标是否在链接上。如果是，我们将添加蓝色边框。

＆＃13;

＆＃13;

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline;
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  border-top: 2px solid blue;
  border-bottom: 2px solid blue;
}

＆＃13;

<nav>
  <ul>
    <li><a href="http://www.google.com">Home</a></li>
    <li><a href="http://www.apple.com">Services</a></li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;