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

我有一個垂直菜單，顯示了懸停的子菜單項。我想根據父菜單項對齊子菜單。我正在通過中繼器提供菜單和子菜單項。我希望子菜單如圖中所示進行響應。使用此鏈接，例如：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>

來源

2016-07-01 Jitesh Mehta

你可以把類的UI元素加上標題標籤（H3）和默認margin和padding屬性重置瀏覽器設置。

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

或針對元素本身。

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

這一切都取決於在其他元素之間沒有其他邊距或填充樣式。

來源

2016-07-01 05:34:05

請參考我給出的網站。 –

我想要完全相似的菜單 –

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

回答

相關問題