Category sub category simple menu list

Experts,

I am having issues display and <ul> <li> nav menu on my page.

Below is the table structure i have used. It pulls the information fine but when it comes to filtering it right I am stuck.
i need it to print:

hb_cat.title
<ul>
      <li>hb_sub_cat.title<li>
</ul>

buy each category title.

category 1
      sub category data
category 2
       sub category data
Thanks

/* table structure */
 
// category table
CREATE TABLE `hb_cat` (
  `id` int(10) NOT NULL auto_increment,
  `title` varchar(30) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
 
sub category table
CREATE TABLE `hb_sub_cat` (
  `id` int(10) NOT NULL auto_increment,
  `cat` int(10) NOT NULL,
  `title` varchar(30) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
/* end table structure */
 
 
// Attempt sql statment #1
SELECT hb_cat.id AS cid, hb_cat.title AS ctitle, hb_sub_cat.id AS sid, hb_sub_cat.cat AS scat, hb_sub_cat.title AS stitle
FROM hb_cat, hb_sub_cat
WHERE hb_cat.id = hb_sub_cat.cat
GROUP BY hb_cat.id, hb_sub_cat.id
 
// Attempt sql statement #2
SELECT hb_sub_cat.id sid,hb_sub_cat.cat,hb_sub_cat.cat as scat,hb_sub_cat.title as stitle,hb_cat.title,hb_cat.id as cid FROM hb_sub_cat JOIN `hb_cat` on (hb_sub_cat.cat=hb_cat.id)

Select allOpen in new window