Issue with CSS photo gallery

I'm trying to make an image gallery and I'm having a small problem. When you click on one of the thumb images it disappears until you click on another thumb image, and so on. I'm want it to stay the same after clicking it but I can't figure out how. Here's my coding. Thanks ahead of time!

<style type="text/css">
.gallery {width:485px;padding:10px;position:relative; margin:20px 0;}
.gallery b.default {position:absolute; left:10px; top:10px; width:530px;}
.gallery b.default img {display:block; margin:0 auto 10px auto;border:1px solid #666;}
.gallery ul {list-style:none; padding:0; margin:0; width:60px; position:relative; float:right;}
.gallery ul li {display:inline; width:60px; height:85px; float:left;}
.gallery ul li a img {width:50px; height:75px;border:1px solid #666;}
.gallery ul li a:active, .gallery ul li a:focus {white-space:normal; border:1px solid #666;}
.gallery ul li a:active b, .gallery ul li a:focus b {position:absolute; left:-306px; top:0; width:500px; height:435px;z-index:20;}
.gallery ul li a:active img, .gallery ul li a:focus img {margin:0 14px 10px auto; width:auto; height:auto; border:1px solid #666;}
</style>

<div class="gallery"><b class="default"><img src="images/image1.jpg" alt="" /></b>
<ul>
<li><a href="#nogo"><b><img src="images/image1.jpg" alt="" /></b></a></li>
<li><a href="#nogo"><b><img src="images/image2.jpg" alt="" /></b></a></li>
<li><a href="#nogo"><b><img src="images/image3.jpg" alt="" /></b></a></li>
<li><a href="#nogo"><b><img src="images/image4.jpg" alt="" /></b></a></li>
</ul>
</div>

your .gallery ul li a:active is set to a negative value (left: -306px;) so it's moving so far to the left that it's no longer visible on the screen

I know you have put a lot of work into the gallery and trying to stick with CSS only, but there some great JQuery image setups that make image galleries just so easy to use. Lightbox and Shadowbox are two examples that come to mind.

Lightbox 2: http://www.huddletogether.com/projects/lightbox2/
Shedding Some Light on Lightbox: http://www.webreference.com/programming/javascript/Lightbox/
VisualLightBox is a free wizard program that helps you easily generate online photo albums, lightbox gallery with a nice Lightbox-style overlay effect, in a few clicks without writing a single line of code: http://lightbox2.com/lightbox2-how.html

Shadowbox (Like Lightbox): http://www.shadowbox-js.com/

These are just suggestions as you probably have a layout already in mind you want to use.

Yeah I actually changed my gallery to an awesome jquery gallery I saw that had a zoom function. I didn't test out what you said marilynn.fowler but you are probably right. Before I had set up that gallery to use a hover function and then changed it to show the larger image only when active rather then hover. Thanks for the links :)

You're welcome. Forgot to mention the nice zoom function. :P