• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 129
  • Last Modified:

Make current menu a certain color

I am trying to make the current menu a certain color.  It's not working.
The HTML
<ul>
   <li class="current"><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>

Open in new window


The CSS
.ul.menu li.current a {
	color:#f8fb04;
	}

Open in new window

0
DS928
Asked:
DS928
  • 4
  • 4
  • 2
1 Solution
 
Dr. KlahnPrincipal Software EngineerCommented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
<style>
	.current {
	background-color: #f8fb04;
	}
</style>
</head>

<body>

<ul>
   <li class="current"><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>

</body>
</html>

Open in new window


Note that if you want the whole list to have the style and not just the individual list element, the style must be applied in the UL tag instead:

<ul class="current">

Open in new window

0
 
DS928Author Commented:
I just want the word home to be the different color.  I tried this but it still doesn't change the color.

.current {
	color: #f8fb04;
	}

Open in new window

and this
.current {
	background-color: #f8fb04;
	}

Open in new window

0
 
Dr. KlahnPrincipal Software EngineerCommented:
An easier way to do it than by applying a style:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>

<ul>
   <li><a href='#'><span><FONT COLOR="#F8FB04">Home</FONT></span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>

</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
God don't use FONT

http://jsfiddle.net/v3enLqyn/

Your menu, with a class added to the top menu
<ul class="menu">
   <li class="current"><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>
</ul>

Open in new window


CSS
ul.menu li.current a {
	color:#f8fb04;
}

Open in new window

0
 
DS928Author Commented:
Yes.  I noticed that FONT changed the color but moved everything around as well.
Here is the HTML
<ul class="menu">
   <li class="current"><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>

Open in new window


The CSS
.ul.menu li.current a {
	color:#f8fb04;
}

Open in new window


Still not changing the word "Home" to yellow.
0
 
GaryCommented:
You're not using the correct css

ul.menu li.current a {
	color:#f8fb04;
}

Open in new window

0
 
DS928Author Commented:
i tried that as well. Still not changing the color.

http://www.davidschure.com/index.html

<div id="container">
 <div id='cssmenu'>
   <ul class="menu">
   <li class="current"><a href='#'><span>Home</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='active has-sub'><a href='#'><span>Services</span></a>
      <ul>
         <li><a href='#'><span>Reputation Cleaner</span></a></li>
         <li><a href='#'><span>Search Engine Optimization</span></a></li>
         <li><a href='#'><span>Account Eraser</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>Corporate</span></a></li>
   <li><a href='#'><span>Estate Eraser</span></a></li>
   <li class='active has-sub'><a href='#'><span>Contact / Info</span></a>
      <ul>
         <li><a href='#'><span>Contact Us</span></a></li>
         <li><a href='#'><span>Terms and Conditions</span></a></li>
         <li><a href='#'><span>Privacy Policy</span></a></li>
   	  </ul>
</li>
 </div>

Open in new window

0
 
GaryCommented:
#cssmenu > ul > li.current > a {
    color: #f8fb04;
}

Open in new window

0
 
DS928Author Commented:
Bingo!  That worked!  Why?
0
 
GaryCommented:
It's more specific targetting, since you are using that to set the default colour you have to use the same targetting to change a color on a specific item
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.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now