having problem setting current state of my verticle nav menu

Hi all, this is my first post and I am a very part time web designer...like 3 in my whole life.:).

So for the last two weeks I have been trying to alter this free 3 column template to my needs and I have come undone.

My problem is( and I know it's a css issue) I cannot get the navigation to highlight when on the current page. I have managed to do it for my top navigation using some PHP but the left nav, which I tried to use similar code for will not work. It seems to me that my top nav that worked was just a case of setting an id called "current". for example :

<ul>
<li<?php if ($current_page == "home") echo $list_item ?>><a href="index.php"><span>Home</span></a></li>
<li<?php if ($current_page == "about") echo $list_item ?>><a href="about.php"><span>About</span></a></li>
<li<?php if ($current_page == "News") echo $list_item ?>><a href="news.php"><span>News</span></a></li>
<li<?php if ($current_page == "contact") echo $list_item ?>><a href="contact.php"><span>Contact</span></a></li>
<li<?php if ($current_page == "support") echo $list_item ?>><a href="support.php"><span>Support</span></a></li>
<li<?php if ($current_page == "downloads") echo $list_item ?>><a href="downloads.php"><span>Downloads</span></a></li>
</ul>

so a variable is set in the current page. $current_page with home...about... etc and the $list_item is just a variable current.

and in my .css i had #header #current a {
background-position:0% -42px;
color: #FFF;
}
#header #current a span {
background-position:100% -42px;
color: #FFF;
}

which looked like it moved the background image...ok it worked.

so now I am trying to do the same with this vertical menu but there is no image, just a 4 pixel border that changes colour along with the text it is in the stylesheet as follows /* sidebar */
#sidebar {
float: left;
width: 23%;
margin: 0; padding: 0;
display: inline;
}
#sidebar ul.sidemenu {
list-style:none;
margin:10px 0 10px 15px;
padding:0;
}
#sidebar ul.sidemenu li {
margin-bottom:1px;
border: 1px solid #f2f2f2;
}
#sidebar ul.sidemenu a {
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

min-height:18px;
}

* html body #sidebar ul.sidemenu a { height: 18px; }

#sidebar ul.sidemenu a:hover {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;
}

/* my try at setting 'current' for the side menu */

#sidebar #currentside a {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;
}

with this code in my page, very similar to the top one just with a different id=currentside. example
<div id="sidebar" >

<h1>Main</h1>
<ul class="sidemenu">
<li<?php if ($current_page == "home") echo $sidelist_item ?>><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="times.php">Times</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="teaching_calendar.php">Teaching Calendar </a></li>
<li><a href="our_team.php">Our Team </a></li>
<li><a href="recruitment.php">Recruitment </a></li>
</ul>

so far i have just been testing it with the home page and it won't work, any help will possibly stop me losing my one strand of hair left...save the hair!! ;) a link to my test site http://www.thefulhamstudy.co.uk/thefulhamstudytest/index.php

Woody

i stripped away the class for the ul and rewrote the sidebar css with my currentside Id and it now displays with a liststyle even though i have set it to no list style in the css for example .

/* sidebar */
#sidebar {
float: left;
width: 23%;
margin: 0; padding: 0;
display: inline;

}
#sidebar ul {
list-style:none;
margin:10px 0 10px 15px;
padding:0;
}

#sidebar li {
margin-bottom:1px;
border: 1px solid #f2f2f2;*/
}
#sidebar a {
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

min-height:18px;
}

* html body #sidebar a { height: 18px; }

#sidebar a:hover {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;
}

/* my try at setting 'current' for the side menu */

#sidebar #currentside a {
padding:2px 5px 2px 10px;
background: #006F6F/*#f2f2f2*/;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;

i have tried setting the ul to have an id instead of a class - didn't work

i have a thought to set a new class for a in #sidebar ul.sidemenu a

loosing my marbles

ok so I managed to finally get it :

I removed the class of the ul thus changing and referenced the div id like this

#sidebar {
float: left;
width: 23%;
margin: 0; padding: 0;
display: inline;
}
#sidebar ul {
list-style:none;
margin:10px 0 10px 15px;
padding:0;
}
#sidebar li {
margin-bottom:1px;
border: 1px solid #f2f2f2;
}
#sidebar a {
list-style:none;
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

min-height:18px;
}


* html body #sidebar a { height: 18px; }

#sidebar a:hover {
padding:2px 5px 2px 10px;
background: #f2f2f2;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;
}

/* my try at setting 'current' for the side menu */

#sidebar #currentside a {
padding:2px 5px 2px 10px;
background: #006F6F/*#f2f2f2*/;
color: #006F6F;
border-left:4px solid #006F6F/*#9EC630*/;

what was messing me up for the past few hours was I had missed the list-style:none in

#sidebar a {
list-style:none;
display:block;
font-weight:bold;
color: #333;
text-decoration:none;
padding:2px 5px 2px 10px;
background: #f2f2f2;
border-left:4px solid #CCC;

which i found strange because i had it declared in #sidebar ul . Anyway sorry to have shovelled a tonne of code on here. have a good night :)