Html CSS Навигация border

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

Вы можете использовать маржинальный-топ: -2px и край дна: -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, чтобы определить, находится ли мышь по ссылке. Если это так, мы добавим синюю границу.

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

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