ASP.NET Menu Spacing Issue with Drop Down Arrow
<p>I have an ASP.NET menu and for the items that contain a drop down menu, it displays an arrow in a new <code>&lt;td&gt;</code>, the problem is the spacing is horrible. How do i tap into that <code>&lt;TD&gt;</code> or lessen the spacing between the menu text and Arrow?</p>

<p>Screenshot of menu issue: <img src="http://i.stack.imgur.com/n8p1O.jpg" alt="enter image description here"></p>

<p>HTML Output:</p>

<pre><code>&lt;td style="white-space:nowrap;"&gt;
&lt;a class="ctl00_itemMenu_1 StaticMenuItemStyle ctl00_itemMenu_3" style="border-style:none;font-size:1em;" href="Default.aspx"&gt;&amp;nbsp;Home&amp;nbsp;&amp;nbsp;&lt;/a&gt;
&lt;/td&gt;
&lt;td style="width:0;"&gt;
&lt;img style="border-style:none;vertical-align:middle;" alt="Expand Home" src="Images/menu_arrow.gif"&gt;
&lt;/td&gt;
</code></pre>

<p>Menu Control:</p>

<pre><code>&lt;asp:Menu ID="itemMenu" SkinID="MenuSkin" runat="server" Orientation="Horizontal"
            CssClass="menu" DynamicItemFormatString="&amp;nbsp;{0}&amp;nbsp;&amp;nbsp;" StaticItemFormatString="&amp;nbsp;{0}&amp;nbsp;&amp;nbsp;"
            StaticEnableDefaultPopOutImage="true" StaticPopOutImageUrl="~/Images/menu_arrow.gif"
            DynamicPopOutImageUrl="~/Images/menu_arrow_dynamic.gif" DynamicEnableDefaultPopOutImage="true" 
            MaximumDynamicDisplayLevels="5"&gt;
            &lt;StaticMenuStyle CssClass="StaticMenuStyle" /&gt;
            &lt;StaticMenuItemStyle Width="100%" CssClass="StaticMenuItemStyle" /&gt;
            &lt;StaticHoverStyle CssClass="StaticHoverStyle" /&gt;
            &lt;DynamicMenuStyle CssClass="DynamicMenuStyle" /&gt;
            &lt;DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" Width="100%" /&gt;
            &lt;DynamicHoverStyle CssClass="DynamicHoverStyle" /&gt;
        &lt;/asp:Menu&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.menu
{
padding: 0px 0px 0px 7px;
margin:0px;
}

.StaticMenuStyle a, .StaticMenuStyle a:visited, .StaticMenuStyle a:active, .StaticMenuStyle a:hover
{
color: #ffffff;     
text-decoration: none;
padding: 3px 9px 3px 9px;   
height: 100%;               
display: table;     
font-weight: bold;      
font-family: Tahoma, Arial; 
}

 .DynamicMenuStyle a, .DynamicMenuStyle a:visited, .DynamicMenuStyle a:active,    .DynamicMenuStyle a:hover 
{
color: #ffffff;     
text-decoration: none;
padding: 7px 9px 7px 9px;
width: 100%;    
height: 100%;               
display: table;         
font-weight: bold;  
font-family: Tahoma, Arial; 
}

.StaticMenuStyle td
{
font-weight: normal;
height: 100%;
font-size: 11px;
border-collapse: collapse;
/*cursor: pointer;*/    

}

.DynamicMenuStyle table
{
border-collapse: collapse;  
border-spacing: 0px;
}

.DynamicMenuStyle td
{
border: solid 1px #ffffff;  
font-weight: normal;
width: 100%;
height: 100%;
/*cursor: pointer;*/    
background-color: #333333;      
border-collapse: collapse;  
border-spacing: 0px;
font-size: 11px;
}

.DynamicMenuStyle td table tr td
{
border: solid 0px #ffffff;
padding: 7px 4px;


    }

.StaticMenuItemStyle td
  { 

padding: 7px 0px 7px 0px;

border: 0px solid #ffffff;
font-weight: normal;        
text-align: left;   
  }


.StaticHoverStyle td, .DynamicHoverStyle td
{
background-color: #5c5c5c;
font-weight: bold;  
}

.StaticSelectedStyle, .DynamicSelectedStyle
{
font-weight: normal;
cursor: pointer;
}
</code></pre>
