How do I get spry menu tab highlighted when on page ???

Question

Hey guys I'm stuck
I'm  trying to get  the tab in the spry menubar to be highlighted  when each relevant page  .. but something isn't right it's not working what am I missing here ???
now when I hover the btn disappears  and when on the  page the tab isn't highlighted ? Please help ! many thanks in advance for taking the time to look
I have placed  this code at the  bottom of   sprymenuhorizontal.css to over ride above styles !
ul.MenuBarHorizontal a span {
    visibility: hidden; 
ul.MenuBarHorizontal  {
    background: url(images/btn.png) no-repeat;
    height: 35px;
ul.MenuBarHorizontal :hover, ul.MenuBarHorizontal :focus,
ul.MenuBarHorizontal .MenuBarItemHover, ul.MenuBarHorizontal .MenuBarItemSubmenuHover, ul.MenuBarHorizontal .MenuBarSubmenuVisible {
    background: url(images/btnhover.png) no-repeat;
ul.MenuBarHorizontal li.activeMenuItem  {
    background: url(images/btnonpage.png) no-repeat !important;
then I put in this code  at the top of the page   to link to sprydomutils which is in my spryassest folder!
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
</script>
<script src="SpryAssets/SpryDOMUtils.js"></script>
<script>
function InitPage(){
Spry.$$('#MenuBar1 li').forEach(function(node){
    var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
    if(a.href == window.location){
        Spry.Utils.addClassName(node,"activeMenuItem");
Spry.Utils.addLoadListener(InitPage);
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
<style>
ul.MenuBarHorizontal a span {
    visibility: hidden;  
ul.MenuBarHorizontal  {
    background: url(images/btn.png) no-repeat;
    height: 35px;
ul.MenuBarHorizontal :hover, ul.MenuBarHorizontal :focus,
ul.MenuBarHorizontal .MenuBarItemHover, ul.MenuBarHorizontal .MenuBarItemSubmenuHover, ul.MenuBarHorizontal .MenuBarSubmenuVisible {
    background: url(images/btnhover.png) no-repeat;
ul.MenuBarHorizontal li.activeMenuItem  {
    background: url(images/btnonpage.png) no-repeat !important;
</style>

Answer 1

The reason I asked if you used templates or not is that in this case we would have a centralised script to detect the active menu item.
If you have a menu on each page (without the template) then it is easy to mark the menu item as being the current one by simply adding a class as follows
<li class="activeMenuItem"><a href="index.php">Home</a></li>
Now we merely add a few rules to style the active menu item as in
.activeMenuItem a {
    background: #a59a84 url(nav_background.png) !important;
    color: #ffffff !important;
The !important is necessary otherwise the JS will override these values.
Add the style rules to the bottom of SpryMenuBarHorizontal.css and add the class to each relevant menu item in each document.
Which brings me to the fact that you have used a horizontal menu bar for vertical positioning. Why? I must admit, the effect is not bad and that is more important.
Gramps