menu acoderon con bd

[gordot]

hola amigos.. tengo la siguiente tabla que se llama Categorias (cat):

id--nombre
1 libros
2 perros
3 gatos

y otra tabla que se llama Subcategoria (subcat):

relacion - nombre
1 shakespere
1 olguin
2 golden
2 dogo
2 caniche
3 normal

Quiero llenar un menu acordeon vertical de esta forma:

Código HTML:

<ul id="accordion">
    <li><div>libros</div>
        <ul>
            <li><a href="#">shakespere</a></li>
            <li><a href="#">olguin</a></li>
           
        </ul>
    </li>
    <li><div>perros</div>
        <ul>
            <li><a href="#">golden</a></li>
            <li><a href="#">dogo</a></li>
             <li><a href="#">caniche</a></li>
            
        </ul>
    </li>
    <li><div>gatos</div>
        <ul>
            <li><a href="#">normal</a></li>
            
        </ul>
    </li>
</ul> 

La consulta q hago es la siguiente:

Código PHP:

  mysql_query("SELECT c.nom as nom, s.nom as sub FROM cat c INNER JOIN subcat s WHERE c.id=s.id ")  
   

como podria hacerlo sin que se repinta la categoria, ya q con esa consulta se repite la categoria..

muchas gracias