Menu / body id problem

Hi All,

What im trying to do is have the background-color of a menu item be different if the user is on that page.
So if the user were on this page: I want that menu item to be blue.

The way i usually do this by using a body id in the html isnt working and im not the best at css.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Message Train :: Training & Coaching for High Performance</title>
<link rel="stylesheet" href="mt.css" type="text/css" media="screen">

	<div id="wrapper">
    	<div id="main_nav"><?php include 'nav_main.php'; ?>
        <div id="header"><a href="index.php"><img src="images/logo.jpg" alt="Message Train Logo" width="200" height="125" border="0" /></a>
        <div id="stream_nav" class="ff_bg">
        <ul id="tabnav">
	<li class="streambc"><a href="stream-bid-coaching.php">BID COACHING</a></li>
    <li class="streamel"><a href="stream-e-learning.php">E LEARNING</a></li>
    <li class="streamtv"><a href="stream-training-videos.php">TRAINING VIDEOS</a></li>
        <div id="main">
        	<div id="main_left_nav"><?php include 'nav_ff.php'; ?>
            <div id="main_right">
			<h1 class="ff_head"><span class="ff_head_light">FACE TO FACE TRAINING</span><br/>&rarr;&nbsp;SALES AND BUSINESS DEVELOPMENT</h1><br/>
		  <span class="body_cap">Getting a different or better result means doing something differently. Message Train can work with your sales and BD teams to turn skills and knowledge into behavioural change.</span><br/><br/><span class="body_txt">Whether this is to build productive relationships, influence others or to negotiate a contract, we can help you to achieve greater performance levels in your sales and BD teams. Our clients comment on our attention to commercial outcomes and our ability to tailor the development to their specific context.<br/><br/>Learning pathways may include some of the following pre-designed courses or speak to us about custom designing a solution for your specific needs.

/* -------------------main_left nav-------------------- */

#main_left_nav {

#main_left_nav ul {
	list-style: none;
	padding: 0;
	margin: 0;

#main_left_nav li {
	float: left;

#main_left_nav li a {
	font-family:'TrumpGothicEastRegular', Helvetica, sans-serif;
	width: 90px;
	display: block;
	color: #ffffff;
	text-decoration: none;
	text-align: center;

#main_left_nav li.main_left_ff a {

#main_left_nav li.main_left_bc a {

#main_left_nav li.main_left_el a {

#main_left_nav li.main_left_tv a {

#main_left_nav li.main_left_ff a:hover {

#main_left_nav li.main_left_bc a:hover {

#main_left_nav li.main_left_el a:hover {

#main_left_nav li.main_left_tv a:hover {

#main_left_nav li a, #main_left_nav li a:hover {
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 1.0s;
  -webkit-transition-timing-function: ease;
  -moz-transition-property: background-color;
  -moz-transition-duration: 1.0s;
  -moz-transition-timing-function: ease;
  -o-transition-property: background-color;
  -o-transition-duration: 1.0s;
  -o-transition-timing-function: ease;
  -ms-transition-property: background-color;
  -ms-transition-duration: 1.0s;
  -ms-transition-timing-function: ease;
  transition-property: background-color;
  transition-duration: 1.0s;
  transition-timing-function: ease;

Any Ideas?? Thanks in advance!

One way to do this is to put a class on the body element (e.g. <body class=“bus”>) and then a special class on the LI or the <a> (e.g. <li class=“bus”>) and then write a CSS rule like this:

.bus #main_left_nav li.bus a {
    background-color: #15A9E2;

You could also do this totally differently with something like PHP (as shown here) but that’s another story …

Thanks ralph.m!
ended up going with the php option…


So you know, I’m getting an error accessing the page.

No input file specified.

Changed the URL by the looks of it.