使用存储过程的结果填充下拉菜单

Question

因此，我的CSS中有一个可悬停的下拉菜单，我想用我的SQL Server中基本存储过程的结果填充该下拉项，该存储过程从表Categories中选择所有行。

我可以从代码中调用存储过程并获取正确的类别结果，但是下拉菜单中显示的格式已关闭。它们全部接连出现在一条直线上。

我不确定在下拉菜单中动态显示类别的方法是否错误，或者是否与如何将其存储在模型中有关。

我试图通过创建一个表来检查我是否错误地接收了数据，该表的第一列显示CategoryId，另一列显示CategoryName，它们正确且分别显示（不在一行）就像我的下拉菜单一样）。

视图中的

html：

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.category[0].CategoryId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.category[0].CategoryName)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.category)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.CategoryId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CategoryName)
                </td>
            </tr>
         }

    </tbody>
</table>

<div class="my_dropdown">
    <button class="my_dropbtn">
        Categories
        <i class="fa fa-caret-down"></i>
    </button>

    <div class="my_dropdown-content">

            @foreach (var item in Model.category)
            {
                @Html.DisplayFor(modelItem => item.CategoryName)
            }

    </div>
</div>

将鼠标悬停在表格和下拉菜单上时的屏幕截图： https://gyazo.com/5d9807c54324524fb7d6e333512b34f4

此页面的Razor视图后面的代码：

public class CreatePortfolioModel : PageModel
{
        CategoryDAL objCategory = new CategoryDAL();
        public List<CategoryTB> category { get; set; }

        public void OnGet()
        {
            category = objCategory.GetAllCategoires().ToList();
        }
}

仅在SELECTS * FROM处调用存储过程的地方：

public class CategoryDAL
{
        //To View all employees details    
        public IEnumerable<CategoryTB> GetAllCategoires()
        {
            List<CategoryTB> lstcategory = new List<CategoryTB>();

            using (SqlConnection con = new SqlConnection(connectionString))
            {
                SqlCommand cmd = new SqlCommand("SelectCategories", con);
                cmd.CommandType = CommandType.StoredProcedure;

                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();

                while (rdr.Read())
                {
                    CategoryTB category = new CategoryTB();

                    category.CategoryId = Convert.ToInt32(rdr["CategoryId"]);
                    category.CategoryName = rdr["CategoryName"].ToString();

                    lstcategory.Add(category);
                }

                con.Close();
            }

            return lstcategory;
        }
}

如果需要信息，请在我的CSS中使用“悬停的下拉菜单”：

.my_dropdown {
    float: left;
    overflow: hidden;
}


/* Dropdown button */

.my_dropdown .my_dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: black;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}


/* Add a red background color to navbar links on hover */

    .my_dropdown:hover .my_dropbtn {
        background-color: lightgray;
        text-decoration: none;
    }


/* Dropdown content (hidden by default) */

.my_dropdown-content {
    display: none;
    position: absolute;
    background-color: #9ceee0;
    min-width: 121px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    text-decoration: none;
}


/* Links inside the dropdown */

.my_dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


        /* Add a grey background color to dropdown links on hover */

.my_dropdown-content a:hover {
    background-color: #ddd;
}


/* Show the dropdown menu on hover */

.my_dropdown:hover .my_dropdown-content {
    display: block;
}

现在的主要问题是如何正确划分下拉菜单，以便所有类别都不会被打包成一行，并找出这是html方面的问题还是我如何捕获数据。截至目前，每个类别名称仅是下拉菜单中的文本，然后我将其命名为当单击它们时，将出现第二个下拉菜单，其中包含适当的子类别，这些子类别将填充第二个下拉菜单。