?
Solved

How can I make this menu option a different color?

Posted on 2011-10-21
2
Medium Priority
?
140 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:brucegust
2 Comments
 
LVL 13

Accepted Solution

by:
Jesus Rodriguez earned 2000 total points
ID: 37009526
#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
 

Author Comment

by:brucegust
ID: 37009631
Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month14 days, 11 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question