Javascript-форум - Почему требуется двойное нажатие мыши с начала, а потом открывается с одного щелчка?

Почему необходимо сперва нажать два раза на ссылку "ТЕКСТ 1" чтобы открылся блог SUBMENU1, а потом достаточно только одного нажатия? Как убрать такой дефект?
И кстати, может мой вариант кода не оптимален, тогда предложите свой и поясните почему.

<head>
  <style type="text/css">
  <!--
     #submenu1,#submenu2,#submenu3 {
        display: none;
      }
  -->
  </style>

  <script type="text/javascript" src="scripts/base.debug.js"></script>
  <script type="text/javascript">
     function sh(x) {
       document.getElementById(x).style.display = document.getElementById(x).style.display == 'none' ? 'block' : 'none';
     };
  </script>
</head>

<body>
<a class="bm1" href="javascript:sh('submenu1')">Текст 1</a>
   <div id="submenu1">
      <a class="bm2" href="">Текст 1.1.</a>
      <a class="bm2" href="">Текст 1.2.</a>
      <a class="bm2" href="">Текст 1.3.</a>
   </div>

<a class="bm1" href="javascript:sh('submenu2')">Текст 2</a>
   <div id="submenu2">
      <a class="bm2" href="">Текст 2.1.</a>
      <a class="bm2" href="">Текст 2.2.</a>
   </div>

<a class="bm1" href="javascript:sh('submenu3')">Текст 3</a>
   <div id="submenu3">
      <a class="bm2" href="">Текст 3.1.</a>
      <a class="bm2" href="">Текст 3.2.</a>
      <a class="bm2" href="">Текст 3.3.</a>
   </div>

</body>