Slide Toglle dosent works some time

Slide Toglle dosent works some time

can any one tell me why this piece of code dosent work some time.. sliding
dosent takes place every time, sometime it stays still after clicking...
it works well in my 21" pc screen but in my mini laptop sometimes it
dosent get trigred. any help please.......
i also tried putting the script into document .ready function but then it
dosent work at all...
<div id="aboutus" onclick="showLayer('aboutus-sub');">
<img src="more.png" id="more" title="more here.."
style="width:25px;height:25px;"/></div>
<div id="aboutus-sub" style="display:none;">
<ul><li><a href="chatroom.php">Chat Room</a></li>
<ul><li><a href="album.php">Album</a></li>
<ul><li><a href="studentsarea.php">Settings</a></li>
<ul><li><a href="studentsarea.php">i student</a></li>
</ul>
</div>
</td>
</tr>
</table>
<script>
function showLayer (){
$('#aboutus-sub').css('visibility','visible').slideToggle('slow','swing');
}
</script>
css part is
#aboutus-sub{z-index:+1;
text-align:center;
border-radius:4px;
border:1px solid black;
position:absolute;
visibility:hidden;
right:15px;
top:61px;
width:100px;
color:white;
height:150px;
background-color:#042D18;
opacity:0.88;
}
li a:hover{
color:#FFFF24;
text-decoration:underline;
}
ul{
padding:0px;
margin:0px;
}
li{
list-style:none;
padding:2px 0px;
border-bottom:1px dashed #060DD6;
margin-bottom:5px;
}
li a{
font-weight:bold;
margin-bottom:6px;
display:block;
color:white;
text-decoration:none;
}
.last{
border:0px;
}