link text not changing colour
i have a css navigation ., however when the user rolls over the font should change colour but it doesnt
HTML Code:
<div id="nav"><nav id="navigation" class="site-navigation" role="navigation">
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Services</a>
<ul class="dropdown">
<li class="menu-item sub-menu"><a href="#">Insolvency Advice</a></li>
<li class="menu-item sub-menu"><a href="#">Business Recovery</a></li>
</ul></li>
<li class="menu-item"><a href="#">Events</a></li>
<li class="menu-item"><a href="#">Contact Us</a></li>
</ul>
</nav></div>
the css
Code:
body {
background: #1f1f1f;
}
.site-navigation {
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
margin: 2px;
}
.site-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.site-navigation li {
display: block;
float: left;
position: relative;
text-decoration: none;
background-color: #FFFFFF;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 25px;
padding-bottom: 5px;
padding-left: 20px;
}
.site-navigation li a {
text-decoration: none;
display: block;
color: #666;
}
.site-navigation li:hover {
@include transition(background, 0.2s);
cursor: pointer;
color: #69C;
}
.site-navigation ul li ul {
visibility: hidden;
float: left;
min-width: 150px;
position: absolute;
transition: visibility 0.65s ease-in;
margin-top:12px;
left: 0;
z-index: 999;
}
.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
visibility: visible;
background-color: #CCC;
}
.site-navigation ul li ul li {
clear: both;
padding: 5px 0 5px 18px;
width: 100%;
}
.site-navigation ul li ul li:hover {
background-color: #CCC;
}
