如何將垂直子菜單項與父菜單對齊

Question

我有一個垂直菜單，該菜單顯示懸停時的子菜單項。我想根據父菜單項對齊子菜單。 我通過中繼器帶來菜單和子菜單項。 我希望子菜單能夠響應，如圖所示。 例如，使用此鏈接： http : //www.industrybuying.com/

    <div class="vertical-menu-content">
                                <ul class="vertical-menu-list">
                                    <asp:Repeater ID="rptVerticalMenu" runat="server" OnItemDataBound="rptVerticalMenu_ItemDataBound">
                                        <ItemTemplate>

                                            <li class="vertical-menu4">
                                                <a href="Product_List.aspx?cat=<%#Eval("BasicCategoryName")%>" class="parent linkSize">
                                                    <asp:Label ID="lblCatList" runat="server" Text='<%#Eval("BasicCategoryName")%>'></asp:Label>
                                                </a>
                                                <div class="vertical-dropdown-menu">
                                                    <div class="vertical-groups">
                                                        <div class="row">
                                                            <div class="col-sm-4">
                                                                <div class="block-content-vertical-menu border-left">
                                                                    <h3 class="head">CATEGORIES</h3>
                                                                    <div class="inner">
                                                                        <ul class="vertical-menu-link">
                                                                            <asp:Repeater ID="rptVerticalSubMenu" runat="server">
                                                                                <ItemTemplate>
                                                                                    <li>
                                                                                        <a href="Product_List.aspx?cat=<%#Eval("CategoryName")%>">
                                                                                            <asp:Label ID="lblCatName" runat="server" CssClass="text" Text='<%#Eval("CategoryName")%>'></asp:Label>

                                                                                        </a>
                                                                                    </li>
                                                                                </ItemTemplate>
                                                                            </asp:Repeater>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                           <%-- <div class="col-sm-4">
                                                                <div class="block-content-vertical-menu border banner-hover">
                                                                    <a href="#">
                                                                        <img src="WebTheme/TransMax/data/banner/b42.png" alt="Banner"></a>
                                                                </div>
                                                            </div>--%>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                        </ItemTemplate>
                                    </asp:Repeater>



                                </ul>
                            </div>

Answer 1

您可以選擇UL元素的類以及Header標簽（h3），然后將瀏覽器的默認邊距和填充屬性重置為您的設置。

.vertical-menu-list, .vertical-menu-link, h3{
    margin: 5px;
    padding:5px;
}

或針對元素本身。

ul, h3{
    margin: 5px;
    padding:5px;
}

這完全取決於其他元素之間沒有其他邊距或填充樣式。