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

可以使用CSS定位Hover

3 个答案: