树菜单正确的div风格

Question

我试图为类别创建一个树形图，我使用插件jquery.treemenu和一些css创建它，所以我的第一个树菜单看起来像这样：

之后我决定在类别名称下面添加属性，所以我填入div，这就是现在的样子：

这就是如何构建我的html for treemenu：

    @model  List<Model.DTO.CategoryDTO>

@{
    TagBuilder ol = new TagBuilder("ddd");

    ol.InnerHtml = "";

    <style>
.properties_list .property_item
{
    display:inline-block;
    font-size:15px;
}
.properties_list
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    text-align: left;
}
.property_item
{
    margin-right: 3px;
}
    </style>
    foreach (var category in Model)
    {

        var propertiesList = new TagBuilder("ul");
        propertiesList.AddCssClass("list-group properties_list");
        if (category.PropertyList != null && category.PropertyList.Count > 0)
        {
            foreach (var prop in category.PropertyList)
            {
                var propertyItem = new TagBuilder("li");
                propertyItem.AddCssClass("btn btn-active property_item list-group-item");
                propertyItem.SetInnerText(prop.Name);
                propertiesList.InnerHtml += propertyItem;
            }
        }

        TagBuilder li = new TagBuilder("li");
        li.Attributes.Add("data-id", category.Id.ToString());
        li.Attributes.Add("data-name", category.Name);
        li.InnerHtml = "<b class=\"namecategory\">" + category.Name + "</b>"
            + propertiesList
            + "<small class=\"handler transperent btn-sm glyphicon glyphicon-move text-muted\"></small>"
            + "<button class=\"btn transperent hidden btn-config \"   data-toggle=\"modal\" data-target=\"#ModalUpdate\" ><small class=\"glyphicon glyphicon-cog\"></small></button>"
            + "<button class=\"btn transperent hidden btn-add \"      data-toggle=\"modal\" data-target=\"#ModalAdd\"    ><small class=\"glyphicon glyphicon-plus\"></small></button>"
            + "<button class=\"btn transperent hidden btn-remove \" data-toggle=\"modal\" data-target=\"#ModalDelete\" ><small class=\"glyphicon glyphicon-minus\" ></small></button>";
        TagBuilder ul = new TagBuilder("ul");
        if (category.ChildrenCategory != null)
        {
            ul.InnerHtml = Html.Partial("FlexibleListCategories", category.ChildrenCategory).ToString();
        }


        li.InnerHtml += ul;
        //li.InnerHtml += propertiesList;
        ol.InnerHtml += li;

    }
    MvcHtmlString ms = new MvcHtmlString(ol.InnerHtml);


    @ms
}

所以问题是如何使用名称和属性为我的新div设置样式，它应该看起来像第一棵树，但只是下面的属性。

一个类别的树状菜单的外部html：

          <ul class="tree serialization">
                    <style>
.properties_list .property_item
{
    display:inline-block;
    font-size:15px;
}
.properties_list
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    text-align: left;
}
.property_item
{
    margin-right: 3px;
}
    </style>
<li data-id="5" data-name="Mobile phones"><b class="namecategory">Mobile phones</b><ul class="list-group properties_list"><li class="btn btn-active property_item list-group-item">wqe</li><li class="btn btn-active property_item list-group-item">prop</li></ul><small class="handler transperent btn-sm glyphicon glyphicon-move text-muted"></small><button class="btn transperent hidden btn-config "   data-toggle="modal" data-target="#ModalUpdate" ><small class="glyphicon glyphicon-cog"></small></button><button class="btn transperent hidden btn-add "      data-toggle="modal" data-target="#ModalAdd"    ><small class="glyphicon glyphicon-plus"></small></button><button class="btn transperent hidden btn-remove " data-toggle="modal" data-target="#ModalDelete" ><small class="glyphicon glyphicon-minus" ></small></button><ul>    <style>
.properties_list .property_item
{
    display:inline-block;
    font-size:15px;
}
.properties_list
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height: 30px;
    text-align: left;
}
.property_item
{
    margin-right: 3px;
}
    </style>