How to display a list of categories and subcategories menu style with data returned from database in codeigniter

I am trying to display a vertical menu(navigation menu) which has a set of categories and subcategories.

I am able to fetch data from database, But failing to place the subcategories under it's parent exactly.

I am able to display category and its sub-categories. But i need the subcategories to be displayed only when mouse hover or clicked on Category.
Here is the snapshot what i wanted to do

enter image description here

Electronics --> when clicked on Electronics it must show the list under Electronics category

Automobiles has no sub categories *Not all categories have subcategories.

Here is my code: Model:

    function getCategories()
{
    $this->db->select();
    $query=$this->db->get('ci_tbl_categories');
        if ($query->num_rows() > 0)
        {
            $result =$query->result_array();

            for($i=0;$i<count($result);$i++)
            {
                $query1=$this->db->query("select * from ci_tbl_subcategory where cat_id='".$result[$i]['cat_id']."'");
                if($query1->num_rows() > 0)
                {
                $result[$i]['sub']=$query1->result_array();
                }
                else
                {
                $result[$i]['sub']=array();
                }
            }

            //print_r($result);
            return $result;
        }
        else
        {
            return $query->result_array();
        }

}

Controller:

            function categories()
    {
        $this->load->model('categories');

        $result['res'] = $this->categories->getCategories();

        //print_r($result['res']);
        $this->load->view('category',$result);

    }

View:

<script type="text/javascript"> 
$(document).ready(function(){

  $("#main").click(function(){
    $("#sub").slideToggle("slow");
  // alert("clicked");

  });
});
</script>


     <body>
<div id="category" style="border-radius:5px; width:200px;background-color:#d2dbde; ">
<?php //echo count($res)."<br/>";?>
<div id="nav_head">Categories</div>

<?php for($a=0;$a<count($res);$a++)
{
//echo $row['cat_name']['subcat_name']."<br/>";
?><div id="main"><?php echo $res[$a]['cat_name'];?></div>
<?php
if(count($res[$a]['sub']) > 0)
{
?><div id="sub">
 <?php for($b=0;$b<count($res[$a]['sub']);$b++) {?>

<div id="subcat"><?php echo $res[$a]['sub'][$b]['subcat_name'];?></div>

<?php }?>
</div>
<?php }} ?>
</div>
</body>

Many thanks

Solution

First of all, creating div's in a loop with a static id's won't work as you'll end up with multiple div's with the same id. Try using class names.

<div class="main">

<div class="sub">

Then you should be able to detect the click/mouseover and show/hide the sub

$(document).ready(function(){
  $(".main").click(function(){
    $(this).next('.sub').slideToggle("slow");
  });

  $(".main").mouseover(function(){
    $(this).next(".sub").slideToggle("slow");
  }).mouseout(function(){
    $(this).next(".sub").slideToggle("slow");
  });
});