Item space between in menu item is not working in asp.net

Question

I'd like give a space between asp.net menu item. Hence, I tried with the staticmenuitemstyle and horizontalpadding="10" attribute which was suggested by some other post in SO. But, It's not working.

<staticmenuitemstyle horizontalpadding="10" />

Please let me know how can I give space between menu item ?

My code ::

 <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" 
           EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal" 
           BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" 
           Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px">
      <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" />
      <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
      <DynamicMenuStyle BackColor="#F7F6F3" />
      <DynamicSelectedStyle BackColor="#5D7B9D" />
      <staticmenuitemstyle horizontalpadding="10" />
      <Items>
          <asp:MenuItem NavigateUrl="~/WebPages/Default.aspx"  Text="Support1">
          <asp:MenuItem NavigateUrl="~/WebPages/Default2.aspx"  Text="Support2">
      </Items>
</asp:Menu>

Which .NET framework version are you using? The Menu control renders as an `ul` in 4.0 and as a `table` in previous versions. With that being said, you can control the spacing via CSS accordingly. — juanreyesv, Jun 20 '13 at 06:49
I'm using .NET Framework 4.0. @juanreyesv please let me know how can i handle in CSS ? — Smaug, Jun 20 '13 at 08:22

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

You can use CSS Selectors to achieve that

In your code you have asigned the CssClass attribute to your Menu control. Make use of that CSS class called "menu" and override it in your page (you can move it later to a css file). So add this to your page in the <head>

<style type="text/css">
    .menu li ~ li
    {
        padding-left: 100px; /* selects every <li> element that are preceded by a <li> element. */
        list-style:none;
    }

    .menu ul > li:first-child
    {
        font-size:20px;/* this one will select the first element of your menu */
    }
</style>

Please note that I added the .menu ul > li:first-child selector so you will not get a left padding on the first element of the menu, I just changed the font-size to give you an example of the control that CSS selectors provide. You can remove it if you like.

Hope this helps you

Item space between in menu item is not working in asp.net

1 Answers1