Thread: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

Sub-Sub-Categories flyout menu doesn't align. Too much gap!

In a standard installation, all of CP's main categories are listed horizontally near the top of the page.

All the sub-categories are displayed vertically as a flyout menus when the mouse is hovered over the main category.

Then, any sub-sub-categories are displayed to the right of the sub-categories.

The problem I'm having is that there is too much space in between the sub-categories and the sub-sub-categories and as soon as the mouse hits that 4-pixel gap, the menu collapses and you need to start over by putting your mouse on the top category and working your way down again.

Has the CSS file been designed to handle multiple levels of sub-categories (I can't find it, only sub-categories (#catnav li ul li)) and if not, what can be done to get rid of the excess gap in between these multi-category hierarchies?

Re: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

I recall seeing a thread about this same issue some time ago.. I will try to find it as there should be a solution in there..

Re: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

Thanks. I've been digging all over the forums looking for an answer which is why I finally posted the question. I figured I couldn't be the first to have ever encountered this.

Re: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

I just can't remember what the topic was called and keywords I'm thinking of aren't picking it up.

This thread is the closest I have found with the issue mentioned (7th post down): http://wpclassipress.com/forum/viewtopic.php?f=4&t=1308, and the only suggestion there was to rewrite the file with the original..

I'll keep looking though, definitely in there somewhere! If anyone else remembers or knows the solution please post

Re: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

FOUND IT!

It's inside master.css (I knew there was another css file I was forgetting about too!)

Down at the bottom of it you'll find...

/* Style drop down list level 2 */
#catnav li ul ul{margin:-25px 0 0 170px}

If you change that 170px to something larger, then the menu moves to the right. Making it smaller moves the menu to the left, reducing that gap. Since I had a 4-pixel gap to overcome, the following will fix that...

#catnav li ul ul{margin:-25px 0 0 166px}

Re: Sub-Sub-Categories flyout menu doesn't align. Too much gap!

Glad to hear it, thanks for sharing the solution