For this you have to use

a:active property

Make it bold and you will get what you want.

Try something like

ol li a:active {
font-weight: bold;
}

.....and stay bold?

You will also need to apply to :visited for this, e.g., using the bold value to help visually identify visited links in addition to default color: change.

Might also be a good idea to specifically declare the initial value and not trust defaults

You get a little more control over defining bold by using numeric values.

W3C - font-weight: [w3.org]

ol li a {
font-weight: 400;
}

ol li a:visited {
font-weight: 800;
}

ol li a:active {
font-weight: 800;
}

It's not so easy to make a menu with a "selected" item based on what you clicked in another page.
The pages are (aside of "visited" status of links) basically almost ignorant of where you clicked.

To do what you seek, you have the path of javascript, or a path where you let the html tell you somehow which is the element that needs to be highlighted (and you could use server side technology to deliver it as such), or there's a CSS3 trick (and yes it's a trick).

Javascript: see the appropriate forum, I'm not going to go into that.

Highlight the appropriate element:

You have a number of choices:
- give it a class and style that class.

<ol>
 <li><a href="#">option 1</a></li>
 <li class="highlight"><a href="#">option 1</a></li>
 <li><a href="#">option 1</a></li>
</ol> 

Or to select them with always the same html for the menu: match up a wrapper's class or id with the entry's class or id

e.g. for two pages:

<ol class="subject1">
 <li class="entry1"><a href="#">option 1</a></li>
 <li class="entry2"><a href="#">option 2</a></li>
</ol>

<ol class="subject2">
 <li class="entry1"><a href="#">option 1</a></li>
 <li class="entry2"><a href="#">option 2</a></li>
</ol>

.subject1 .entry1 , .subject2 .entry2 {
 font-weight: bold;
}

Note you could move the class="subject2" onto the body if you want to do that.

The CSS3 trick is explained here as an example in [webmasterworld.com...] (with thanks to SuzyUK's jquery it even works in IE)

Hi Guys thanks for your help, I still can't get it to work.

here is the css, what would I need to change to make the <li></li> stay bold on click?

#left {float: left;width: 180px;margin-right: 20px ;}

#right {float: right;width: 180px}

#right ul li,#left ul li {list-style-type: none;}

#right ul li a,#left ul li a {text-decoration: none;display: block;padding:4px 10px 4px 0;background: url(../images/arrow.gif) no-repeat left center;

padding-left: 20px;border-bottom: 1px solid #eee;}

#right ul li a:hover,#left ul li a:hover {background: url(../images/left_hover.png) left top;}

#right ul#mainlevel li img {float: left;margin-right: 8px; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;}
#left ul li .sublevel a,#right ul li .sublevel a,#left ul.menu li.parent ul li.item a,#left ul.menu li ul li a,#right ul.menu li ul li a {border: none;background: url(../images/bullet.png) no-repeat left center;margin-left: 18px;padding: 2px 0 2px 15px;}

#left a#active_menu.sublevel_current,#current.parent.active a{background: url(../images/bullet.png) no-repeat left center;font-weight: bold;border: none;}

#current.parent.active ul li a {font-weight: bold;}

#left ul li .sublevel a:hover,#right ul li .sublevel a:hover,#left ul.menu li ul li a:hover, {text-decoration: underline;}

Thank you,

Ok so I have this now:

.menu a:active, a:hover{background: url(../images/bullet.png) no-repeat left center;font-weight: bold;border: none;}

the problem is that now it works on hover and when I click on the link, but as I let go of the mouse it goes back to normal from bold, how can i get it to stay bold, until it is not selected anymore?

THank you,

to make the <li></li> stay bold on click?

'on click' indicates :active state. Nowhere in the above post is a declaration made for the :active state of the <a> within <li>.

Any of the answers above should lead you to the solution. Just keep working the problem.
..............................

A dot separated id is valid, but advanced. You can also escape characters in CSS. jQuery can be used to slog through issues with both.
..............................

My initial feeling is that you are over-complicating, but I may not be correctly understanding the relevant issues.

<edit> You posted while I was composing, so there my post may or may not be relevant. I'll have to go see what you've posted. </edit>

how can i get it to stay bold, until it is not selected anymore?

I don't get it. Please define "selected anymore". Is this 'link' being used for a purpose other than sending the user somewhere else? The user hovers over the link and the text goes bold. The user clicks on the link (:active) and the text remains bold. Then the user is gone - so what is the point, the purpose? It will stay bold after the click by using :visited, but I am pretty lost at understanding what is happening and what is wanted. I am certain that the solution is a simple one. Possibly already answered by swa66 - less simple, assuming a more complex question, but providing a connect the dot answer and resources.

Hi D_Blackwell.

Thanks for your post.

Well basically the user is hover over the link it turns bold, the user clicks on the link and as long as the user is holding the button down the link is bold, but the second the user lets go, the links turns back to normal from Bold. The link currently have a <a href="#">Option 1</a> so it dosn't go anywhere, but I liked to see the option 1 stay bold ever after the release of the button. I hope I am being more clear now.

Thank you for your time.

~A

A <a href="#"> or a <a href="someotherpage.html"> will not make a difference.
You can't just add state to html all that easily.

Please see the solutions I proposed earlier.