Style Menu

[sonia.sardana]

<title>Untitled Page</title>
    <style type="text/css" >
    .StaticMenuItemStyle
    {
    color: #993333;
       font-size : 14px;
    font-weight : bold ; 
    text-decoration : none;
    padding-left : 2px;
    
    }
    
    .StaticHoverStyle,.StaticSelectedStyle
    {
    	background-color :#c1e4ce;
    }
    
    .DynamicMenuItemStyle
    {
    font-size :14px;
    color : #707070;
    background-color : #cccccc;
    padding : 4px 2px 4px 3px  ;
    }
    
    .DynamicHoverStyle
    {
    	background-color :#707070;
    	color :White ;
    }
    
          
    
    </style>

 <asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" Orientation ="Horizontal"
        StaticMenuItemStyle-CssClass ="StaticMenuItemStyle" 
        StaticHoverStyle-CssClass ="StaticHoverStyle"
        StaticSelectedStyle-CssClass ="StaticSelectedStyle"
        DynamicMenuItemStyle-CssClass ="DynamicMenuItemStyle"
        DynamicHoverStyle-CssClass ="DynamicHoverStyle" 
        BackColor="#FF9933" 
         staticenabledefaultpopoutimage="true" Height ="28px" 
                        onmenuitemclick="Menu1_MenuItemClick">
                 </asp:Menu>

My code is generating o/p as i show in pic.

As U can see in pic when i hover the mouse sales menu item,some part of it is not fully changed..Y it is happening?? I want to change all the part including top part???What to add extra so dat whole is changed to green color including top part.

May be i m not able to understand u my prob clearly,but all are genious,so I hope u get me!