Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of Jesus Rodriguez
Jesus Rodriguez
Flag of United States of America image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Bruce Gust
Bruce Gust
Flag of United States of America image

ASKER

Thanks!