Javascript-форум - Выпадающие списки. Помогите подправить код.

Всем привет!
Такая задачка:

Есть список:

<ul>
        <li class="cat-item cat-item-187"><a href="" title="">parent</a>
       
                <ul class="children">
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                </ul>
        </li>

        <li class="cat-item cat-item-183"><a href="" title="">parent</a>
                              <ul class="children">
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                    <li class="cat-item cat-item-140"><a href="" title="">children</a>  </li>
                </ul>
             </li>
    </ul>

Мне нужно, чтобы родители были без ссылок, и при нажатии на них выплывали дети.

Пишу код :

<script type="text/javascript">
      //удаляем ссылки из родителей
       $('ul.children').parent(['li']).find('a:first').css('border', '1px solid #eaeaea').removeAttr('href');
    //пытаемся их заставить выплывать
       $("document").click(function()
    {
        $(this).next('ul.children').slideToggle(300).siblings('ul.children').slideUp('slow');
      });
      </script>

ну и

Код:

    ul.children{

    display:none

    }

тоже прописываю..
но почему то не работает..

помогите исправить..

<!DOCTYPE html> <html> <head> <style> li ul { display: none; } li:hover ul { display: block; } </style> <script> </script> </head> <body onload='Test()'> <ul> <li class="cat-item cat-item-187">parent <ul class="children"> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> </ul> </li> <li class="cat-item cat-item-183">parent <ul class="children"> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> </ul> </li> </ul> </body> </html>

<!DOCTYPE html> <html> <head> <style> .menu { cursor: pointer; } .off { display: none; } .on { display: block; } </style> <script> function Go(Obj) { var o=Obj.getElementsByTagName('ul') o[0].className=(o[0].className=='on')? 'off': 'on' } </script> </head> <body> <ul> <li class='menu' onclick='Go(this)'>parent 1 <ul class="off"> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> </ul> </li> <li class='menu' onclick='Go(this)'>parent 2 <ul class="off"> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> <li class="cat-item cat-item-140"><a href="" title="">children</a> </li> </ul> </li> </ul> </body> </html>