Links inside expanding menu not opening - menu

Question

I'm experiencing a problem related to expanding menus. I cannot seem to be able to link outside of the expanding menu as the only thing all links inside the menu do are collapse it or just simply do nothing at all.
Here are two examples of the menu system that I'm trying to create:
http://www.ullastiina.fi/testsite/page.html
http://www.ullastiina.fi/testsite/page2.html
I have tried to look into this for many hours now but I'm currently at a complete standstill. Can anybody help me?
PAGE.HTML
HTML
<div class="divcenter">
<div class="menu">
<font color="#ffffff">+ Expand</font>
<font color="#ffffff">- Collapse</font>
<ul id="list">
<li class="li1">BLANK TEXT TITLE</li>
<li class="li2">Link 1</li>
<li class="li2">Link 2</li>
</ul>
</div>
</div>
CSS
#list, .show {
display:none;
color: #5e5e5e;
font-weight: normal;
padding:10px;
list-style-type:none}
.hide:focus + .show {display: inline;}
.hide:focus { display: none; position:relative;}
.hide:focus ~ #list { display:block;}
PAGE2.HTML
<div class="divcenter">
<div class="menu">
<li>
<font color="#FFFFFF">+ Expand</font>
<div class="nav-collapse88">
<ul>
<li class="li1"><font color="#666666">BLANK TEXT TITLE</font></li>
<li class="li2">Link 1</li>
<li class="li2">Link 2</li>
</ul>
</div>
</div>
JS
$(function(){
$(".nav-collapse88").hide();
$("a").click(function(e){
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})

Answer 1

Your js doesn't make sense. Try this:
$(function(){
$( ".menu ul" ).hide();
$( ".hide" ).click(function(e){
e.preventDefault();
$( ".hide" ).hide();
$( ".show" ).show();
$( ".menu ul" ).slideDown();
});
$( ".show" ).click(function(e){
e.preventDefault();
$( ".show" ).hide();
$( ".hide" ).show();
$( ".menu ul" ).slideUp();
});
});
Or see this Fiddle. Hope this helps.