PS3 Level 2 menu text partly hidden by Level 1 menu

I have a problem in that the text in level 2 (L2) items in my menu is partly covered by the width of the level 1 (L1) menu.

I thought at first that this was a problem caused by me customising the menus supplied in PS3 (using CSSMW). The changes I made being to the menu’s colours and the width of the main menu to 110px and L1 & L2 to 125px; nothing dramatic. However, I did have this overlap problem.

The cause of this seems to be L1 Sub Item 1 is narrower than L1 Sub Item 2. This means all Sub Items (2, 3, etc.) in L1 partly cover the text in L2’s Sub Item 2 and onwards.

Just to see if it was me or not, I opened the original PS3 menu I have on my check site and found this problem was already there to start with and my alterations hadn’t caused this error. As a picture saves a thousand words, I have attached screenshots of the original PS3 menu both in CCSMW and in IE8 to show this point.

I would really appreciate someone helping with this, as I need to solve this problem ASAP. Thanks in advance for any help.

If you give a url to a page with the non-functioning menu we can tell you the exact line in the .css to update to fix it.

Hello Ray,

I'm afraid I can't give you a page URL as my site is still on a test server on my PC. (When I last had a major problem [with Theme-It], Dani had to call me on +44 (0)1524 427427. I'm available at this number from 10.00am up until 2.00pm your time.)

Excuse my ignorance though, but as the problem seems to be in the PS3 programme (as shown in my screenshots of the latest and unaltered PS3 files), will you not be able to work out where the problem is ocurring in the PS3 CSS files? If you can let me know what needs changing in the PS3 files, I'll find the necessary code in my own site and make the alterations.

Hope you can help from this suggestion, but if not please let me know what you'd like to try next. Thanks for your help, Ray.

To get the menu to show up correctly in Menu Writer when you're viewing the pages, you will have to make this change to the CSSMenuWriter/cssmw_home/menu.css file. Find:
ul#cssmw_home ul.level-2 {
left: 170px;
padding-left: 5px;
}

Modify it to look like this instead:
ul#cssmw_home ul.level-2 {
left: 110px;
margin-left: 60px;
padding-left: 5px;
}

To get the menu to show up correctly in IE6, you will have to find the block of code in CSSMenuWriter/cssmw_home/menu_ie.css file that looksl ike this:
ul#cssmw_home ul.level-2 {
left: 112px;
}

and modify it to look like this:
ul#cssmw_home ul.level-2 {
left: 110px;
border-left:: hidden;
border-left-width: 5px;
}

Hello Jimmy and thanks for your reply.

Unfortunately, I couldn't get the method you suggested to work. However, you did put me on the right track with your reference to margins. What I did was set the L2 left group margin to 38px in CCSMW and this corrected the problem. Having tested my site in a browser, everything seems to work OK. I’ve attached a screenshot that you may (or may not!) find of interest but it does show the affect of what I did.

Thanks for your prompt reply and guidance, Jimmy; really appreciated.

Great to hear it. If you run into any additional issues, feel free to open a new thread.