CSS Hover Issue in Internet Explorer

I’m having an interesting CSS issue between Firefox and Internet Explorer.

On my site, Firefox is rendering the CSS as desired, but IE isn’t and I can’t chase it down. Here’s the test site: https://lifespotlight.com/testspotlight/ If you look in Firefox, you see that Fitness is highlighted in white with black text, just as I want. In IE, it’s not changing the text to black…as you can see, Fitness is highlighted white, but you can’t see the text without mousing over it…for some reason it’s ignoring my code to set the color to 000000.

Here’s the CSS code that I’m using to make that hover and “selectedspotlight” class. Notice that hover and selectedspotlight are using the same exact CSS block.

#nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}

#nav a, #nav a:visited {
	color: #FFFFFF;
	display: block;
        font-weight: bold;
        margin: 0px;
	padding: 7px 20px 7px 20px;
	border-right: 1px solid #FFFFFF;
	border-left: 0px solid #FFFFFF;
	}

#nav a:hover, #nav a.selectedspotlight {
	background: #FFFFFF;
	color: #000000;
	display: block;
	text-decoration: none;
        margin: 0px;
	padding: 7px 20px 7px 20px;
	}

Here’s what is being rendered from the PHP. Based on this, it seems that my “selectedspotlight” should be getting called on that Fitness link. Is something wrong with the CSS or the HTML?

<div id="navbar">
	<div id="navbarleft">
		<ul id="nav">
			<li><a href="https://lifespotlight.com">Featured</a></li>
			<li><a href="https://lifespotlight.com/fitness/" class="selectedspotlight">Fitness</a></li>
			<li><a href="https://lifespotlight.com/health/">Health</a></li>
			<li><a href="https://lifespotlight.com/lifestyle/">Living</a></li>
			<li><a href="https://lifespotlight.com/forums/">Forums</a></li>
			<li><a href="https://lifespotlight.com/about">About Us</a></li>
					</ul>
	</div>
</div>

Here’s all of the code for the Navbar section in case you want to see the rest of the HTML going on in there.

#navbar {
	//background: #;
	width: 960px;
	height: 28px;
	font-size: 12px;
	font-family: Arial, Tahoma, Verdana;
	color: #FFFFFF;
	font-weight: bold;
	margin: 20px 0px 10px 0px;
	padding: 0px 0px 30px 0px;
	border-top: 0px solid #1A4182;
	border-bottom: 0px solid #1A4182;
	}

#navbar a, #navbar a:visited {
	color: #FFFFFF;
	font-size: 11px;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0px 0px 0px 3px;
	}

#navbar a:hover {
	color: #FFFFFF;
	text-decoration: underline;
	padding: 0px 0px 0px 3px;
	}

#navbar p {
	color: #FFFFFF;
	margin: 0px auto 0px;
	padding: 0px 0px 0px 10px;
	font-weight: bold;
	}

#navbarleft {
	width: 950px;
	float: left;
	margin: 0px;
	padding: 0px;
	}

#navbarright {
	width: 90px;
	font-size: 11px;
	float: right;
	margin: 0px;
	padding: 7px 0px 0px 0px;
	border-right: 0px solid #585858;
	}

#navbarright a img {
	border: none;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	}

#nav {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}

#nav ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	}

#nav a, #nav a:visited {
	color: #FFFFFF;
	display: block;
        font-weight: bold;
        margin: 0px;
	padding: 7px 20px 7px 20px;
	border-right: 1px solid #FFFFFF;
	border-left: 0px solid #FFFFFF;
	}

#nav a:hover, #nav a.selectedspotlight {
	background: #FFFFFF;
	color: #000000;
	display: block;
	text-decoration: none;
        margin: 0px;
	padding: 7px 20px 7px 20px;
	}

#nav li {
	float: left;
	margin: 0px;
	padding: 0px;
	}

#nav li li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 150px;
	}

#nav li li a, #nav li li a:link, #nav li li a:visited {
	background: #850101;
        color: #FFFFFF;
	width: 160px;
	float: none;
	margin: 0px;
	padding: 7px 30px 7px 10px;
	border-bottom: 1px solid #DDDDDD;
	}

#nav li li a:hover, #nav li li a:active {
	background: #000000;
	color: #FFFFFF;
        padding: 7px 30px 7px 10px;
	}

#nav li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	}

#nav li:hover ul {
	left: auto;
	display: block;
	}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	}

Thanks for any help you can provide!!