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; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)