文字颜色的CSS目标不正确

我定义了2个CSS元素，一个称为“水平菜单”，另一个称为“页脚链接”。由于某种原因，当我更改一个div的悬停文本颜色时，它会同时更改两个div的颜色。

以下是有问题的2部分的HTML和CSS。

的HTML

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

<div class="bottombar">

        <div class="copyright">
        <h7>&copy; Copyright 2014 Company name</h7>
        </div>

        <div class="footer-links">
        <a href="#">Privacy Policy</a>&nbsp;|
        <a href="#">GC24</a>&nbsp;|
        <a href="#">Call Rates</a> 
        </div>

</div>

的CSS

.horizontalmenu  a:link, a:visited{
color: #003399 !important;
}

#horizontalmenu li ul  li:hover a,
#horizontalmenu li ul li a:hover {
    color: #fff !important;

.footer-links a:link, a:visited{
    font: 'Gill Sans MT';
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
    color: #fff;
}

.footer-links a:hover{
    text-decoration: underline;
    color: #fff;
}

有人可以帮助我了解为什么会这样吗？

谢谢，