Highlighting Page Selected

[croc]

I have looked on so many sites and can't figure this out. On my blog: http://oligclimbing.blogspot.co.uk/ I have a selection of pages along the top, when I am on a selected page I want the writing to stay highlighted.

The html for the menu ssection is:

<style> /*Start Css Menu By RealcomBiz.com*/
.menu {
    
    border: -1px;
    margin: -1px;
    padding: -1px;
    font-family: Bebas Neue;
    font-size: 59px;
    font-weight: {font-weight:normal;}
    color: 8e8e8e;
}
a:active
{
color:FFFFFF;
font-weight:bold;
background: red;
display:block;

}

.menu li {
    float: left;
    padding: 0px 0px 0px 0px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: normal;
    line-height: 44px;
    padding: 10px 40px;
    text-align: left;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 4px dotted #FFFFFF;
    border-right: 4px dotted #FFFFFF;
    border-bottom: 4px dotted #FFFFFF;
    display: none;
    height: auto;
    filter: alpha(opacity=0);
    opacity: 0.00;
    position: absolute;
    width: 0px;
    z-index: 200;
/*top:0em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}

}

}

/*End Css Menu By RealcomBiz.com*/ 
</style>  


<div class="menu">
 <ul>
  <li><a

href=""></a

href=""></li><li><a
href=""></a
href=""></li><li><a
href=""></a
href=""></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/">HOME</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/photos_2.html">PHOTO</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/videos.html">VIDEO</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/about-me.html">BIO</a>
  </li></ul></div>

How do I do this, and if you have an answer please let me know where in the code it goes

Cheers!

[rtrethewey]

You can't do this with CSS alone. You either need to have the blog script generate the necessary code (which you probably can't do on blogspot), or use JavaScript to compare the document.location.href to the 'href' attributes in your menu links and add an appropriate class name to the <a>nchor tag if it matches. Search on "javascript highlight current page" and you'll find some examples.

[croc]

I did a Javascript search, and added it to the html gadget on the template page:

<style> /*Start Css Menu By RealcomBiz.com*/
.menu {
    
    border: -1px;
    margin: -1px;
    padding: -1px;
    font-family: Bebas Neue;
    font-size: 59px;
    font-weight: {font-weight:normal;}
    color: 8e8e8e;

}
a:active
{
color:FFFFFF;
font-weight:bold;
background: red;
display:block;

}

.menu li {
    float: left;
    padding: 0px 0px 0px 0px;
}

.menu li a {
    color: #666666;
    display: block;
    font-weight: normal;
    line-height: 44px;
    padding: 10px 40px;
    text-align: left;
    text-decoration: none;
}

.menu li a:hover {
    color: #000000;
    text-decoration: none;
}

.menu li ul {
    background: #e0e0e0;
    border-left: 4px dotted #FFFFFF;
    border-right: 4px dotted #FFFFFF;
    border-bottom: 4px dotted #FFFFFF;
    display: none;
    height: auto;
    filter: alpha(opacity=0);
    opacity: 0.00;
    position: absolute;
    width: 0px;
    z-index: 200;
/*top:0em;
/*left:0;*/
}

.menu li:hover ul {
    display: block;
}

.menu li li {
    display: block;
    float: none;
    padding: 0px;
    width: 225px;
}

.menu li ul a {
    display: block;
    font-size: 12px;
    font-style: normal;
    padding: 0px 0px 0px 0px;
    text-align: left;
}

.menu li ul a:hover {
    background: #949494;
    color: #000000;
    opacity: 1.0;
    filter: alpha(opacity=100);
}
function select_nav() {
   var nav_links = document.getElementById('sidebar_content')
     .getElementsByTagName('a');
   var selected = location.pathname;
   
   for (var i = 0; i < nav_links.length; i++) {
     var link = nav_links[i].pathname;
     
     // fiddle IE's view of the link
     if (link.substring(0, 1) != '/')
       link = '/' + link;
     
     if (link == selected)
       nav_links[i].setAttribute(cattr, 'selected');
   }
 }
 
 window.onload = function() {
   select_nav();
 };
}

}

/*End Css Menu By RealcomBiz.com*/ 
</style>  


<div class="menu">
 <ul>
  <li><a

href=""></a

href=""></li><li><a
href=""></a
href=""></li><li><a
href=""></a
href=""></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/">HOME</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/photos_2.html">PHOTO</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/videos.html">VIDEO</a></li>
  <li><a href="http://oligclimbing.blogspot.co.uk/p/about-me.html">BIO</a>
  </li></ul></div>

Nothing happened, which I admit is probably completely down to my lack of understanding.

[TheTechguys]

With online resources such as a list of useful Matic, now easier than ever to use unordered lists to create navigation. As additional assistance to users, why do not shed light on the current page in the movement? And showed a recent article on the list called, regardless of current conservation movement, and how to do it with PHP. Here is an easy solution using CSS