可以將目標懸停在CSS上

Question

請幫忙。

由於某些原因，我的鼠標懸停的CSS將無法正常工作。

我猜我正在使用不正確的語法。

HTML

<div id="horizontalmenu"> 
<ul> 
<li><a href="#">Home</a></li> 

<li> <a href="#">Products</a> 
<ul> 
<li><a href="#">Security</a></li> 
<li><a href="#">Managed Networks</a></li> 
<li><a href="#">Disaster Recovery</a></li> 
<li><a href="#">Cloud</a></li> 
</ul> 
</li> 

<li> <a href="#">Why Indigo?</a></li> 

<li> <a href="#">About Us</a></li> 

<li> <a href="#">Contact</a></li> 

</ul> 
</div> 

CSS

#horizontalmenu { 
    margin-top: 52px; 
    } 

    #horizontalmenu ul {padding:1; margin:1; list-style:none; } 
    #horizontalmenu li {padding-left: 20px; float:left; position:relative; display:block; border:0px solid #CC55FF; border-style:inset; } 
    #horizontalmenu li ul {display:none; position:absolute; } 
    #horizontalmenu li:hover ul{display:block; background-color:rgba(255,255,255,1); height:auto; left: 0px; border: solid; border-width: 0.01em; border-color: grey;} 
    #horizontalmenu li ul li{clear:both; border-style:none;} 
    #horizontalmenu li ul li:hover {background-color: #003399;} 

    .horizontalmenu a:link, a:visited{ 
    text-decoration: underline; 
    color: red; 
} 

    .horizontalmenu a:hover{ 
    text-decoration: underline; 
    color: blue; 
} 

文本保持紅色，甚至當我徘徊？

感謝

Answer 1

而是寫作.horizontalmenu的，你應該寫#horizontalmenu

Answer 2

您使用的是類選擇.horizontalmenu，而不是你的最後兩個規則的ID選擇#horizontalmenu但你<div id="horizontalmenu">並沒有class=horizontalmenu隨時隨地跡象。

:hover不起作用，因爲選擇器的其餘部分不匹配。

---

當然，你犯同樣的錯誤而改變的鏈接衝在第一的地方，所以我不看你怎麼得到你所描述的問題的代碼。儘管修正了gives the effect you are asking for。

Answer 3

#horizontalmenu a:link,#horizontalmenu a:visited{ 
    text-decoration: underline; 
    color: red; 
} 

    #horizontalmenu a:hover{ 
    text-decoration: underline; 
    color: blue; 
}