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和邊距：-2px來解決你的問題：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>