Can someone please assist me with this issue?
I am having trouble getting the CSS to work for my hover effect.
I suspect that there might be a problem with my syntax.
Here is the HTML code:
<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>
And here is the CSS code:
#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;
}
Even when I hover, the text remains red. Any ideas on how to fix it?
Thank you!