click yapıldığında sabit kalan submenu nasıl yaparım

Merhabalar,

Ben bir navigation menu oluşturdum. Bu navigation menuden li a ile taglenmiş bir item tıklandığında buna ait span içerisindeki submenüleri bulan ve sayfada gösteren bir javascript kodu yazmaya çalışıyorum. Şuan sadece click yapıldığında sayfa değişene kadar yan tarafta submenüyü görüyorum ama sabit bir şekilde menü kalmıyor yan tarafta. Bir kaç yol denedim yapamadım. Son çarem herbir li a yi farklı id lerle tanımlamak ve her birinin span i için ayrı idler ve divler yaratıp aşağıdaki kodu uygulamak olacak:

$(document).ready(function(){

    $("#sys").click(function() {

        $("#subNavApp").hide();
        $("#subNavAcc").hide();
        $("#subNavSys").fadeIn(800);
        $('*').removeClass('active');
        $(this).addClass('active');
    });
});
</javascipt>

Ama ben bunu yapmadan hali hazırdaki kodun neden çalışmadığını öğrenmek istiyorum. Size css, javascript ve html kodlarını gönderiyorum. Bana hatalarımı ve ne yapmam gerektiğini açıklarsanız sevinirim. Dediğim gibi Administration kısmı tıklanınca  Administration sayfası gözüküyor ve yan tarafta da mesela menü de Administration, Teachers, Staff bir anlık gözüküyor ve kayboluyor. Bense Administration sayfasındayken yan tarafta o sayfa ile ilgili submenülerin de durmasını istiyorum. 

Teşekkürler

<javascript>    
$(document).ready(function() {
            $("ul#topnav li a").click(function(){
            $(this).find("li span").show();  
            $(this).find("li span").removeClass('active');  
            });

            });

Bu kısımda html kısmı

<div id="logac"><span><a href="index.php?n=Main.LogIn">Login</a></span></div>
<div id="menu"><ul id="topnav"> <div id="wrapper"> 
<li><a href="index.php?n=Main.HomePage">Main</a></li>
<li><a href="index.php?n=Admin.Admin">Administration</a>
<span><a href="index.php?n=Admin.Teachers">Teachers</a> <a href="index.php?n=Admin.Staff">Staff</a>
</span>
</li>
<li><a href="index.php?n=Education.Education">Education</a>
<span> <a href="index.php?n=Education.Beginner">Beginner Level</a><a href="index.php?n=Education.Intermediate">Intermediate Level</a>
 </span>
</li>
</ul></div> 
</div>

#wrapper{
        border-top:20px  solid #9F173A;
        border-right: 20px solid #9F173A;
        border-left: 20px solid #9F173A;
        border-bottom: 6px solid #9F173A;
        
        opacity:0.75;
        width: 560px;
        height:22px;
        display: block;
        float: left;
        -moz-border-radius-bottomleft: 10% 5%;
        -moz-border-radius-topleft: 150px;
        -moz-border-radius-bottomright: 10% 5%;
        -moz-border-radius-topright: 150px;
}
ul#topnav {
        
	float: left;
	width: 930px;
	list-style: none;
	position: relative; 
	font-size: 1.2em;
        padding-top: 39px;
        padding-left: 200px;
        padding-bottom: 5px
    
        

}
ul#topnav li {
	float: left;     
	margin:0;
        padding: 3px;
  
}
ul#topnav li a {
	padding: 0px 10px;
	display: block;
	color: #FFFFFF;
	text-decoration: none;
        font-weight: bold;
        text-decoration: underline;
             
}
ul#topnav li a:active { background: #C01C46;}
ul#topnav li span{
	float: left;
	padding:  0px;
	position: absolute;
	left: 0px;
	display: none;
        margin-bottom: 50px;
        height: 120px;
	width: 200px;
        margin-top: 5px;
	background:#9F173A;
        font-size: 12px;
	color: #fff;
	/*--Bottom right rounded corner--*/
        bottom-left: 20px;
	-moz-border-radius-bottomleft: 10px 5px;
        -moz-border-radius-bottomright: 10% 5%;
        -moz-border-radius-bottomright: 100px;

}
ul#topnav li a:active span { display: block; }
ul#topnav li span a { display:list-item; margin-top: 20px;}
ul#topnav li span a:active {text-decoration: underline;}