垂直サブメニュー項目を親メニューと整列する方法

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

あなたは（H3）UL要素に加えてヘッダータグのためのクラスを取り、あなたの設定にブラウザのデフォルトのマージンとパディングのプロパティをリセットすることができます。

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

または、要素自体を対象とします。

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

これは、間に他の要素に他のマージンやパディングスタイルがないことに依存します。