Display Sub-menu Items under main menu

Question

I am developing a project in which there is a vertical menu on left side. There are main menus alsong with sub menus in which sub menus are retrieved from database. I have used datalist control for menu which also displays its associated sub menus. Suppose for 1st menu there are 3 sub menus. When i run the website all menus display correctly but sub menus, instead of displaying all 3 of them only one sub menu is displayed. Below is the code of datalist.

 

ASPX Code

<div class="left-side">
<h3 class="agileits-sear-head">
Category</h3>
<ul id="accordion" class="accordion">
<asp:DataList ID="dlCategory" runat="server" RepeatColumns="1" RepeatDirection="Vertical">
<ItemTemplate>
<li>
<div class="link">
<%#Eval("Category_Name") %><i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li><asp:HyperLink ID="hypProduct" runat="server" NavigateUrl='<%# GetUrl(Eval("PID"))%>' Text='<%#Eval("Product_Name") %>'> </asp:HyperLink>
</li>
</ul>
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</div>

C# Code

private void GetAllCategoryAndProducts()
{
using (SqlCommand cmd = new SqlCommand("GetCategory", con))
{
cmd.CommandType = CommandType.StoredProcedure;
using (SqlDataAdapter adp = new SqlDataAdapter(cmd))
{
ds = new DataSet();
adp.Fill(ds, "CategoryProduct");
ds.Tables["CategoryProduct"].Columns.Add("PID", typeof(int));
ds.Tables["CategoryProduct"].Columns.Add("Product_Name", typeof(string));
foreach (DataRow dr in ds.Tables["CategoryProduct"].Rows)
{
using (SqlCommand cmd2 = new SqlCommand("SELECT PID,Product_Name FROM tblProduct,tblCategory WHERE tblProduct.Category=@cid AND tblProduct.Category=tblCategory.CID", con))
{
cmd2.Parameters.AddWithValue("@cid", dr["CID"]);
con.Open();
SqlDataReader reader = cmd2.ExecuteReader();
while (reader.Read())
{
dr["PID"] = reader["PID"].ToString();
dr["Product_Name"] = reader["Product_Name"].ToString();
}
reader.Close();
con.Close();
}
}
}
dlCategory.DataSource = ds;
dlCategory.DataBind();
}
}