Third level drop-down?

[isign4jc]

Maybe this is a stupid or obvious question, but does the dropdown plugin for WordPress allow third-level dropdowns? For instance, I want to display the grandparent page at the top, have the parent pages drop-down, then, the child pages drop down or fly out from that.

[isign4jc]

Ok, so I tried to 2 child pages to one of my parent pages, just to see what would happen and the child pages appear, but cover the additional parent pages underneath it. Is there a fix for this?

[imported_Ryan]

Hi, the dropdown plugin allows for as many levels as you like. The CSS generator on the other hand does not. Off the top of my head I can’t remember exactly how many it supports, but if you go to https://geek.hellyer.kiwi/test/ you can try the new test version which may be up and running shortly. It supports at least four levels and the possibility of five (although the fifth level is a bit buggy yet).

If you want to keep using your current CSS, then post a link here so I can see what is going on.

[isign4jc]

Sorry I didn’t respond earlier, but I wasn’t sure at that point whether I really needed those extra sub-pages.

I would like to use my own CSS and here is the link to it:

http://65.109.163.39/css/navbar.css

The website is still a work in progress, but if you need the page where the drop-down is being displayed, it’s at :

http://65.109.163.39/wp/

Right now I don’t have any child pages added to the parent pages, but can add them if needed for testing purposes.

Thanks! Any help would be awesome to get that third level out there!

[imported_Ryan]

Hi isign4jc,
I get the following message when I try to view your file/page.
[quote:38wif3nq]The requested URL could not be retrieved[/quote:38wif3nq]

[isign4jc]

That’s strange. Maybe this will work for the actual site itself?: http://65.109.163.39/wp/index.php

I’ll go ahead and paste the CSS code here:

#nav, #nav ul { /* all lists */
color: #333; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; list-style: none; }

#nav a { color: #333; text-decoration: none; padding: 8px 20px; display: block; /* width: 130px; was this a mac fix? */}

#nav li { /* all list items */
text-align: left; float: left; /* width: 120px; was this a mac fix? */
}

#nav li a:hover { color: #fff; background-color: #781300
}

#nav li ul { /* second-level lists */
background-color: #f09e00 !important; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; position: absolute; width: 165px; left: -999em; /* using left instead of display to hide menus because display: none isn’t read by screen readers */
}

#nav li ul a:hover { color: #fff; background-color: #781300
}

#nav li ul ul { /* third-and-above-level lists */
margin: -1em 0 0 10em;
}

#nav li ul li { /* display of each list item in nested lists */
width: 100%;
clear: left;
/* text-align: center; */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto; }

[imported_Ryan]

Hi,
Sorry, but I only bug fix my own code here. Try the Sitepoint.com CSS forum if you want help with code sourced from elsewhere. There are lots of helpful people there who can help (occasionally me too).

[nooozeguy]

Hi Ryan,

I am trying to change the formatting of the third-level navigation on <a href="http://mjoc.biz/">this site</a>.

Navigating on the menu to Services>Mobile Manager, the "What It Costs", how can I change the position of links like this?

Thanks,
Josh

[imported_Ryan]

Sorry, but I can’t see an immediate solution to your problem.

Did you modify the CSS from the generator? Or did you simply copy and paste and it automatically had this problem?

[nooozeguy]

I pasted in the code from the generator.

I was thinking of adding a #suckerfishnav li li <b>li</b> entry in the CSS and changing the formatting to move the menu right.

Would that be a good solution? The best or easiest?

Thanks,
Josh

[imported_Ryan]

I’ve tried quite hard, but can’t figure out what your problem is. It appears that the CSS used to position the men item is a complete mess.

Could you try using the CSS generator again to see if that helps? If it doesn’t, please post back with the choices you chose in the CSS generator. I suspect that something has gone wrong when you copy and pasted it to your admin panel. If not then there is a serious bug in the CSS generator, but I suspect not as I’ve never seen a problem like this before.

[Author]

Posts