Petit Problème Javascript

Bonjour,
j'ai un petit problème avec un code javascript que je viens de faire. Il s'agit d'un menu avec des sous-sections.

Dans la balise <style> de ma page j'ai :

<style type="text/css">
<!--
#Sub5{
display:none;
position:relative;
}
-->
</style>

et dans ma page, à l'interieure de mon body, j'ai :

<div class="nav">
  <ul>
	<li><a href="#">Accueil</a></li>
	<li><a href="#">Page 2</a></li>
	<li><a href="#">Page 3</a></li>
	<li><a href="#">Page 4</a></li>
	<li><a href="#" onclick="document.getElementById('SecV').style.left = document.getElementById('SecV').style.left == '0px'?'10px':'0px'; document.getElementById('SecV').style.display = document.getElementById('SecV').style.display == 'none'?'block':'none';">Page 5</a></li>
  </ul>
  <ul id="Sub5">
	<li><a href="#">Page 5.1</a></li>
	<li><a href="#">Page 5.2</a></li>
  </ul>
</div>

Le code fonctionne...le seul problème c'est que la première fois que je veux le faire fonctionner, il faut que je clique deux fois avant qu'il se passe quelque chose. Quelqu'un sait pourquoi?