CSS Hover

So I am pretty rookie when it comes to css. I want just the drop down menu of the NAV4 to be a different color then the rest of the menu in my navigation.

this is my css:

[CODE]ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: relative;
<font size=”1″ color=”#BFBFBE”>
}
li ul {
position: middle;
left: 135px;
top: 0;
display: none;
color: black;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: ;
padding: 5px;
border: 0px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById(“nav”);
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName==”LI”) {
node.onmouseover=function() {
this.className+=” over”;
}
node.onmouseout=function() {
this.className=this.className.replace»
(” over”, “”);
}
}
}
}
}
window.onload=startList;
li:hover ul, li.over ul {
display: block;
}
/* Fix IE. Hide from IE Mac */
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
a:hover {
color: #FEC80C;
text-decoration: none;
background-image: url(../images/arrow_nav.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000000;
}
a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #D2D2D2;
font-weight: bold;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #BFBFBE;
}[/CODE]

this is my html for the navigation:

[CODE]<li>
<div align=”center”><a href=”#”>NAV1</a></div>
</li>
<li>
<div align=”center”><img src=”images/dotted_nav.jpg” width=”127″ height=”3″ align=”middle” /></div>
</li>
<li><a href=”#”>NAV2</a></li>
<li>
<div align=”center”><img src=”images/dotted_nav.jpg” alt=”” width=”127″ height=”3″ align=”middle” /></div>
</li>
<li><a href=”#”>NAV3</a>
<li>
<div align=”center”><img src=”images/dotted_nav.jpg” alt=”” width=”127″ height=”3″ align=”middle” /></div>
<li><a href=”#”>NAV4<br />
</a>
<ul>
<li><a href=”#”> SUB1 </font></a></li>
<li><a href=”#”> SUB2 </font></a></li>
<li><a href=”#”> SUB3 </font></a></li>
</ul>
</li>
<li>
<div align=”center”><img src=”images/dotted_nav.jpg” alt=”” width=”127″ height=”3″ align=”middle” /></div>

<li><a href=”#”>NAV5</a>
<li>
<div align=”center”><img src=”images/dotted_nav.jpg” alt=”” width=”127″ height=”3″ align=”middle” /></div>
<li><a href=”#”>NAV6</a></li>
</ul>[/CODE]

So basically all I’m looking for is to make the sub menu in NAV4 be a different color (#BFBFBE) then the rest of the NAV. I want the same hover color however as the rest. I have tried so many different things and I can’t quite figure out what I am missing. Any help would be grateful and thanks in advance.

Also in #CSS _↴