Css Roll Over Breadcrumb Question

HTML & CSS
1

Hello,
This CSS makes button turn gray when the mouse does a roll over. How do I make that color stay when the person is on that page?

Below is the CSS. Thanks for your help.

CSS

#mainMenu a {

	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	padding:2px 6px;
	text-decoration:none;
	
/*	font-weight:bold;
*/	color:#444;
	border:solid #000;
	border-width:0 1px;
	background-color:#FFFFFF
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#000;
	background:#ccc;
/*	background:#BCD;
*/}

#mainMenu li {
	display:inline;
	padding:0 4px;
}

#mainMenu {
	list-style:none;
	padding:8px 0 16px;
}

HTML

<div>
 
 <ul id="mainMenu"> 
 		<li><a href="index.html">Home</a></li>
<li><a  href="aboutus.html">About St. Jude School</a></li> 
		<li><a href="admissions.html">Admissions</a></li> 
		<li><a href="facultystaff.html">Faculty & Staff</a></li> 
        		<li><a href="news.html">News & Events</a></li> 
        <li><a href="#">Contact Us</a></li>
	</ul>
 
  </div>
2

You’ll need to add a hook in the HTML - CSS alone won’t check whether the destination of a link matches the current URL.

If you hard-code the menu into the HTML on each page, it’s simple - just add a class="current" to the relevant item on each page, and then put a .current {...} in the stylesheet.

If you use PHP to build the page, I am sure there is a way to get the PHP to check whether the link destination equals the current URL and dynamically add a class="current" and then proceed as above.

If you pull the menu into the page using a server-side include, you have to be a bit more canny about it. See http://www.sitepoint.com/forums/showthread.php?p=4678076#post4678076 for more info on how to go about it.

3

Thanks for the feedback. But I would also want the button to remain grayed out once the button has been clicked. In other words, if I click on the events button and go to the events page I want that events page to remain grayed out.

4

Rollover=hover. Let’s go into your CSS and find where the hover rules are :slight_smile:

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#000;
	background:#ccc;
/*	background:#BCD;
*/}

That background#BCD is commented out…but anyway. I know from experience that #CCC is gray (from memory…)

That’s your culprit. Think about your problems logically mate :slight_smile:

For current page highlighting, check this link
http://www.visibilityinherit.com/code/current-page.php