How can I make this menu option a different color?

I've got my html and css attached. I need to create an orange square around the "Download Music" link. You can see what I've done thus far and it's not working. It's the "download" dynamic on the stylesheet as well.

Thoughts?
stylesheet


body {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-image: url(images/tile.gif);	
}

td {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

td.top_header {
	text-align: center;
}

td.marquee_holder {
	font-size: 1px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-align: left;
	width:935;
}

td.background {
background-image: url(images/filler_huge.jpg);	
background-repeat: repeat-x;
text-align: center;
}

td.tray {
width: 950px;
}

.login_box{
  background-image:url('images/text_field.jpg');
  border:0px;
  width:109px;
  height:21px;
  font-size: 12px;
  color: #b1a18f;
}

form {
      display: inline;
	  margin-top: 2px;
	  margin-bottom: 0;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 938px;
		height:26px;
		}
	
	#nav li {
		height: 25px;
		margin: 0 5px;
		padding: 0 0 0px;
		display: block;
		float: left;
		position: relative;
		list-style: none;
	}

/* main level link */
	#nav a {
		font-weight: bold;
		color: #e7e5e5;
		text-decoration: none;
		display: block;
		padding:  3px 19px;
		margin: 0;
		height: 20px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #000000;
		color: #ffffff;
	}

	/* sub levels link hover */
	#nav ul li:hover a, 
	#nav li:hover li a {
		background: none;
		border: none;
		color: #666;
	}
	#nav ul a:hover {
		background: #000000;
		color: #000000 !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}
	
	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
		#nav ul li {
		float: none;
		margin: 0;
		padding: 0;
	}

	#nav ul a {
		font-weight: normal;
		text-shadow: 0 1px 0 #fff;
	}

	/* level 3+ list */
	#nav ul ul {
		left: 200px;
		top: 0px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}
	
	#facebook li:hover > ul {
		display: block;
	}
	
	
	#facebook ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 365px;
		height:185px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#facebook ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#facebook ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#facebook ul.plain a {
		text-decoration: none;
		}
		
			#jukebox li:hover > ul {
		display: block;
	}
	
	
	#jukebox ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 600px;
		height:150px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#jukebox ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#jukebox ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#jukebox ul.plain a {
		text-decoration: none;
		}
		
		#download .music a, #d li:hover > a {
		background: #000000;
		color: #ffffff;
	}
	
		#download ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		background: #ee3123;
		}
	
	#download ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}

Open in new window

stylesheet


body {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: center;
	vertical-align: top;
	padding: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	background-image: url(images/tile.gif);	
}

td {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 12px;
	color: #000000;
	text-align: left;
}

td.top_header {
	text-align: center;
}

td.marquee_holder {
	font-size: 1px;
}

td.marquee {
font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-align: left;
	width:935;
}

td.background {
background-image: url(images/filler_huge.jpg);	
background-repeat: repeat-x;
text-align: center;
}

td.tray {
width: 950px;
}

.login_box{
  background-image:url('images/text_field.jpg');
  border:0px;
  width:109px;
  height:21px;
  font-size: 12px;
  color: #b1a18f;
}

form {
      display: inline;
	  margin-top: 2px;
	  margin-bottom: 0;
}

A.marquee
{
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Hover {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

A.marquee:Visited {
	font-family: Verdana, Microsoft Sans Serif;
	font-size: 10px;
	color: #000000;
	text-decoration:underline;
}

#nav {
		margin: 0;
		padding: 0px 6px 0;
		background: #000000;
		width: 938px;
		height:26px;
		}
	
	#nav li {
		height: 25px;
		margin: 0 5px;
		padding: 0 0 0px;
		display: block;
		float: left;
		position: relative;
		list-style: none;
	}

/* main level link */
	#nav a {
		font-weight: bold;
		color: #e7e5e5;
		text-decoration: none;
		display: block;
		padding:  3px 19px;
		margin: 0;
		height: 20px;
	}
	#nav a:hover {
		background: #000;
		color: #fff;
	}

	/* main level link hover */
	#nav .current a, #nav li:hover > a {
		background: #000000;
		color: #ffffff;
	}

	/* sub levels link hover */
	#nav ul li:hover a, 
	#nav li:hover li a {
		background: none;
		border: none;
		color: #666;
	}
	#nav ul a:hover {
		background: #000000;
		color: #000000 !important;
	}

	/* dropdown */
	#nav li:hover > ul {
		display: block;
	}
	
	/* level 2 list */
	#nav ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 200px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
		#nav ul li {
		float: none;
		margin: 0;
		padding: 0;
	}

	#nav ul a {
		font-weight: normal;
		text-shadow: 0 1px 0 #fff;
	}

	/* level 3+ list */
	#nav ul ul {
		left: 200px;
		top: 0px;
	}

	/* clearfix */
	#nav:after {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	#nav {
		display: block;
	}
	
	#facebook li:hover > ul {
		display: block;
	}
	
	
	#facebook ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 365px;
		height:185px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#facebook ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#facebook ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#facebook ul.plain a {
		text-decoration: none;
		}
		
			#jukebox li:hover > ul {
		display: block;
	}
	
	
	#jukebox ul {
		display: none;
		margin: 0;
		padding: 0;
		width: 600px;
		height:150px;
		position: absolute;
		top: 26px;
		left: 0;
		background: #ffffff;
	}
	
	#jukebox ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		}
	
	#jukebox ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}
	
	#jukebox ul.plain a {
		text-decoration: none;
		}
		
		#download .music a, #d li:hover > a {
		background: #000000;
		color: #ffffff;
	}
	
		#download ul a {
		color: #666;
		text-decoration: none;
		display: block;
		padding:  3px 20px;
		margin: 0;
		height: 20px;
		background: #ee3123;
		}
	
	#download ul a:hover {
		background: #ffffff;
		color: #000000 !important;
	}

Open in new window

html

<ul id="nav">
		<li><a href="index.php">What is the Showdown</a>
		<ul>
			<li><a href="ContestLocations.php">Contest Locations</a></li>
			<li><a href="ContestList.php">View Contestants</a>
				<ul>
					<li><a href="ContestantList.php">Current Contestants</a></li>
					<li><a href="ContestantList_alumni.php">Alumni</a></li>
					<li><a href="hall_of_fame.php">Hall of Fame</a></li>
					<li><a href="WinnersCircle.php">Winners' Circle</a></li>
				</ul>
			</li>
		</ul>
		</li>
		<?php require_once('contestant_nav.php'); ?>
		<?php require_once('fan_nav.php'); ?>
		<li><a href="#">Songwriting Contest</a>
		<ul>
			<li><a href="songwriting_intro.php">About the Contest</a></li>
			<li><a href="songwriting_contestant_list.php">View Contestants</a></li>
		</ul>
		</li>
		<ul id="download">
		<li class="music"><a href="http://www.softcoin.com/p/handler?target=general&action=getHome&sid=6350" target="_blank">Download Music</a>
		</li></ul>
		<li><a href="Contact.php">Contact Us</a>
		</li>
		
	</ul>

Open in new window

brucegustPHP DeveloperAsked:
Who is Participating?
 
Jesus RodriguezConnect With a Mentor IT ManagerCommented:
#download ul a:hover {
            background: #ffffff;
            color: #000000 !important;
      }

On this section try to add borders and color for the borders on the stylesheet
0
 
brucegustPHP DeveloperAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.