jquery - vertical multilevel menu, Next level should be shown on Hover -

this image showing vertical menu expanded want parent tag first, on hover next level should shown , on

function display_children($parent, $level, $categorymodel) {      $result = $categorymodel->get_category($parent);     echo "<ul>";     foreach ($result $row) :         if ($row['count'] > 0) {             echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a>";             display_children($row['category_id'], $level + 1, $categorymodel);             echo "</li>";         } elseif ($row['count'] == 0) {             echo "<li><a href='" . base_url() . "/index.php/advertisement/category/" . $row['category_id'] . "'>" . $row['category_name'] . "</a></li>";         }              else;     endforeach;     echo "</ul>"; } 

this code need css. recursive logic why confused. found many css has horizontal menu listing. need vertical menu listing.

here, i've made random list. trick here use css cascades our advantage. i've made every ul inside ul hidden nature. make every ul exact children of hovered li show themselves.

ul{  /*if bullets outside, hover effect flicker.*/  list-style-position:inside;  }    ul ul{  display:none;  }    li:hover>ul{  display:block;  }

<ul>    <li>           <ul>        <li>b</li>        <li>c</li>      </ul>    </li>    <li>    d      <ul>        <li>        e          <ul>            <li>f</li>            <li>            g              <ul>                <li>h</li>                <li>i</li>              </ul>            </li>          </ul>        </li>        <li>        j          <ul>            <li>k</li>            <li>l</li>          </ul>        </li>      </ul>    </li>  </ul>