asp menu third menu allignment/ position problem

Question-
I am doing some practice on asp menu. Third menu "CONTACT" and "COOKIES" were overlapping with second menu "About". So, I increased width of third menu as width:170px and padding-left:170px. Now, the menu is not overlapping but the background color below "About" (second menu) is over lap with third menu("COOKIES" and "CONTACT"). How to solve this? Please suggest me. I tried to search but in vain.

<

asp:Menu id="MyMenu" DynamicMenuStyle-Width="100%" DynamicHoverStyle-CssClass="Custom1" DynamicHoverStyle-ForeColor="Gold"
    StaticDisplayLevels="1" Width="150%" Font-Size="X-Large" Font-Bold="true" Font-Names="true"
    StaticSubMenuIndent="10" ItemWrap="true"
    orientation="Horizontal" style="font-size"
    runat="server" ForeColor="CadetBlue" BackColor="Gold">
    <LevelMenuItemStyles>
    <asp:MenuItemStyle BackColor="Gold"/>
    <asp:MenuItemStyle  CssClass="Sub-menuDesignLevel1a"  />
     <asp:MenuItemStyle  CssClass="Sub-menuDesignLevel2a"  />
     <asp:MenuItemStyle  CssClass="Sub-menuDesignLevel3a"  />

    </LevelMenuItemStyles>


      <dynamichoverstyle  CssClass="Sub-menuDesign"/>
     <items>
          <asp:MenuItem navigateurl="~/Pages/Default_.aspx"
            text="Home"
            tooltip="Home">
           <asp:MenuItem Text="Section1">
            <asp:MenuItem navigateurl="~/Pages/about_.aspx"
              text="About"
              tooltip="About">
              <asp:menuitem navigateurl="~/Pages/contact.aspx"
                text="CONTACT"
                tooltip="CONTACT"/>
              <asp:menuitem navigateurl="~/Pages/CookiesGame.aspx"
                text="COOKIES"
                tooltip="COOKIES"/>
              </asp:MenuItem>
           </asp:MenuItem>

           <asp:MenuItem Text="SECTION2">
            <asp:menuitem navigateurl="~/Pages/XMLReading.aspx"
              text="XMLREADING"
              tooltip="XMLREADING">
             <asp:menuitem navigateurl="~/Pages/Calculator.aspx"
                text="CALCULATOR"
                tooltip="CALCULATOR"/>
            </asp:menuitem>
            </asp:MenuItem>
            <asp:MenuItem Text="Section3">
            <asp:MenuItem
              text="Abouta"
              tooltip="Abouta">
              <asp:menuitem
                text="CONTACTa"
                tooltip="CONTACTa"/>
              <asp:menuitem
                text="COOKIESa"
                tooltip="COOKIESa" Enabled="false"/>
              </asp:MenuItem>
           </asp:MenuItem>
          </asp:MenuItem>
        </items>

    </asp:Menu>

.Sub-menuDesignLevel1a
   {
   background-color: Orange
   ;
   /*background-image: url('../Image/avatar.jpg');
   border:2px solid red;*/
   border-left-color: Black;
   width:120px;
   z-index: 9999;
   padding-right: 130px;
   position: inherit;
   }

    .Sub-menuDesignLevel2a
   {
   background-color: Orange;
   /*background-image: url('../Image/avatar.jpg');
   border:2px solid red;*/
   border-left-color: Black;
   width:170px;
   padding-left:60px;

    z-index: 9999;

   position: inherit;


   }
.Sub-menuDesignLevel3a
   {
   background-color: Orange
   ;
  
   border-left-color: Black;
   width:170px;
   padding-left: 170px;

   position: relative;
   }