爲什麼我的導航鏈接仍然強調？即使有！重要聲明

Question

我不確定這是否可能是由於php/wordpress引起的，但是我有一個導航欄，當您點擊鏈接時，它會保持下劃線，直到您再次懸停爲止。覺得奇怪，我，我從來沒有過這種情況並不能完全明白爲什麼..

<nav> 
    <ul> 
     <li><a href="#"><img src=" " height="10%" width="10%"/>Link 1</a></li> 

     <li><a href="#"><img src=" " height="10%" width="10%"/><a href="#">Link 2</a></li> 

     <li><a href="#"><img src="" height="10%" width="10%"/><a href="#">Link 3</a></li> 
    </ul> 
</nav> 

SCSS ..

nav { 
    margin: 0px; 
    background-color: $nav_bgcolor; 
    box-shadow: $nav_shadow; 

    ul { 
    color: #979797; 
    padding: 0px; 
    display: table; 
    width: 100%; 
    padding: 15px; 
    margin: 0px; 
    text-align: center; 
    } 
    ul li { 
    list-style-type: none; 
    display: inline-block; 
    width: 30%; 
    } 
    ul li a { 
    color: $font_color; 
    } 
    ul li a:hover { 
    cursor: pointer; 
    color: $hover; 
    } 
    a, a:visited, a:active, a:visited, a:focus, a:hover { 
    text-decoration: none !important; 
} 
} 

Answer 1

改變你的 「ul li a」，這樣的：

nav ul li a { 
color: $font_color; 
text-decoration: none; 
} 

Answer 2

我上面的代碼在解決我遇到的問題時確實是正確的。問題發生了，因爲它沒有更新我的任何代碼，因爲瀏覽器已經緩存了該網站。 感謝大家的幫助

注意：刪除瀏覽器歷史！

Answer 3

您需要一些HTML修復程序。 您已在anchor標籤內使用anchor標籤。

HTML

<nav> 
    <ul> 
     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 1 
     </a> 
     </li> 

     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 2 
     </a> 
     </li> 

     <li> 
     <a href="#"> 
      <img src="" height="10%" width="10%"/>Link 3 
     </a> 
     </li> 
    </ul> 
</nav> 

CSS

/*Random colors use your colors here*/ 
$nav_bgcolor:red; 
$nav_shadow:black; 
$font-color:white; 
$hover:green; 

/*Random colors use your colors here*/ 

nav { 
    margin: 0px; 
    background-color: $nav_bgcolor; 
    box-shadow: $nav_shadow; 

    ul { 
    color: #979797; 
    padding: 0px; 
    display: table; 
    width: 100%; 
    padding: 15px; 
    margin: 0px; 
    text-align: center; 
    } 
    ul li { 
    list-style-type: none; 
    display: inline-block; 
    width: 30%; 
    } 
    ul li a { 
    color: $font_color; 
    text-decoration:none; 
    } 
    ul li a:hover { 
    cursor: pointer; 
    color: $hover; 
    } 
    a, a:visited, a:active, a:visited, a:focus, a:hover { 
    text-decoration: none !important; 
} 
}