Highlighting Page Selected

I have been struggling with this for a while, so thought I would post, as I am a complete beginner with this kind of stuff. On my blogger blog, I have created menu bar along the top linking to 4 different pages. When I select a page I want the selected page to stay as a black font in the above menu, not light grey, to make it obvious to users which page they are on. Here is the HTML for the menu:

<style> /*Start Css Menu*/
.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="home link">HOME</a></li>
  <li><a href="photo link">PHOTO</a></li>
  <li><a href="video link">VIDEO</a></li>
  <li><a href="bio link">BIO</a>
  </li></ul></div> 

What code, and where to use it in the above code would be great!

Thanks in advance!

There is really no way to do this w/o access to the blogger source code (or .js)

CSS affects only the current document, thus as far as its concerned its always ON the current document.

If you are able to alter your blogger template you can do one of two things.

  1. give all your nav LIs individual classes that correspond with the page the anchor they contain links to. ala:
    <li class=“home”><a href='blogger.com/home.html>home</a></li>
    <li class=“another”><a href='blogger.com/another.html>another</a></li>
  2. Edit the template so that it adds a class to the BODY tag concurrent with the page beign displayed … so the output would be : <body class=“home”>
  3. Your CSS for this would be like this:
    .home .home, .other .other, .yetAnother .yetAnother , .etc .etc { … style rules for your current link…; }

OR if you are more versed with the blogger templating you could just simply have it output “class=‘current’” in the current link’s LI then simply have that rule in your CSS : .current { … style rules for your current link…;}

I really cant believe blogger doesn’t actually already mark its menu output with some sort fo current marker as wordpress does. so unless you have hardcoaded the HTML you gave as an example, part of hat I have said may already be being done automatically.

Thanks for the quick reply, I tried the the final idea, but I couldn’t figure out how to put it into the page code, copying tutorials didn’t give the same result. When I added it to the HTML/Javascript gadget the menu is assigned to all it did was changed the look of the whole thing.

Searching around again, a few people recommended javascript, but I couldn’t get that to work either.

This is a simple way to do it with JS:

But as D_P said, it depends on what access you have in Blogger.