set height of separator of dynamic menu

See more:

C#

ASP.NET

I am using a dynamic menu where the menu item is brought from database... In order to separate the menu item in root menu, i am using separator image that is a bar image.. i want a separator image to extend throughout the top and bottom vertically touching border of menu bar between menu items making each item of menu to appear like being in a cell. the aspx for menu bar is shown below:

<asp:Menu ID="menuBar" runat="server" Orientation="Horizontal" MaximumDynamicDisplayLevels="5"
                         DynamicHorizontalOffset="1" DynamicVerticalOffset="1" StaticTopSeparatorImageUrl="~/Includes/Images/mSeparatorHor.gif" CssClass="menuHeader" >


                           <StaticMenuItemStyle Font-Names="Tahoma" Font-Bold= "false" ForeColor="White" CssClass="StaticMenuItemStyle" />

                           <StaticHoverStyle ForeColor="White" />

                           <DynamicMenuItemStyle Font-Bold="false" BorderColor="White" BorderWidth="1px" CssClass="DynamicMenuItemStyle" />

                           <DynamicMenuStyle BackColor="WhiteSmoke"/>

                           <DynamicHoverStyle BackColor="LightGray" Width="220px" />

                       </asp:Menu>

I had used css to control the image height as shown below:

.menuHeader
{
    padding-top: 5px;
    padding-right: inherit;
    padding-bottom: inherit;
    padding-left: inherit;
    height: 20px;
    font-size: 13px;
    background-image: url('../../Images/menuBar.gif');
}

.menuHeader img
{
     height: 20px;
}   /**  height of separator */

On increasing height of menuheader image, the height of separator is increased ignoring the height defined in menuheader.. can anyone help me in how to solve it or help me in alternate way to solve this??