Dropdown Menu

Hi there Altlabart!
You can easily do this be dragging the menu item around within the “menu structure” under Appearance>menus

here is an example: https://postimg.org/image/jyw7c04k3/

I used countries as the main menu item and then all the countries as sub menu items.

Hope this helped you out. ??

Hello TouchCoding,
thank you ??
Yes, what you said is the normal method but doesn’t work in Fukasawa =/
Instead, the submenu show up as a menu (but a lit bit for the right side).
I’m looking for a really drop-down menu, that open and close, you know what I mean?

do you know how can I do it?

cheers ??

Oh sorry… haven’t used Fukasawa before, so I didn’t know that, but you can use some simple css to create a dropdown menu.

Try this:

.menu-item {
    position: relative;
    display: inline-block;
}

.sub-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;

}

.menu-item:hover .sub-menu {
    display: block;
}

Try that and let me know if that was what you were after.

Hello TouchCoding,

I tried this and it worked! I was wondering if you could help me, I am also using this theme but I’d like the sub menus to appear in the menu once the menu item has been clicked on.

For example the meanu would appear like this:
A
B
C

And when A is clicked on the menu would appear like this:
A
a1
a2
a3
B
C

I hope that makes sense, as I am not too keen on hover menus.

Thank you!

Hi there, Juiliaalice95!
So if I understand you correctly you want a1, a2 and a3 links only to show when the user is on the A page, right?

Here is the css for that:

.current-menu-item .sub-menu {
    display:inherit;
}

.sub-menu {
    display: none;
}

This will hide all of the sub menus, but show the sub menus of the current menu item. I hope this was what you were after ??

Hi Touchcoding,

It works! Thats brilliant!

Thank you very much for your help ??

Really! It works! thx

Hi Touchcoding,
i dont know where i must paste this code. It’s a huge problem for me.

Thank you for your help ??

Hi there coza86! ??
If you are a beginner with WordPress, I would suggest downloading a custom css plugin and paste the code into that. If you are more advanced, you could use a child theme and paste the code into the style.css.

Hope that helped you out ??

It works!
Thank you for your help ??

How do you do this with on click instead of hover?

Hi Jardster!
You are asking the same question as Juliaalice95 did. Here is the css:

.current-menu-item .sub-menu {
    display:inherit;
}

.sub-menu {
    display: none;
}

Hi,

It doesn’t work. I don’t know if it’s because I’ve got the main Page or “A” as a link (I’ve got “#” on it so that it won’t click over to anything) but once the code is pasted in, and I click on the page nothing happens.

Edited to add, okay, I’ve adjusted and the code works when I classify the main page as a page rather than a link. But, the effect isn’t what I’m looking for.

I’m looking for a code that reveals the sub-pages when you click the name of the main page. This code takes you to the main page and then reveals the sub-pages.

I just want one that drops down and reveals the pages whereever you are on the site rather than taking you to the main page first then revealing the sub pages.

Hi Can anyone help me?

Here is my code

.main-menu li {
display: block;
margin-top: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;}
.main-menu > li:first-child { margin-top: 0; }
.main-menu ul { margin-left: 20px; }
.main-menu a { color: #999; }
.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current_page_item > a { color: #333; }
.main-menu .current-menu-item:before,
.main-menu .current_page_item:before {
content: ‘\f405’;
display: block;
font: 16px/1 “Genericons”;
color: #019EBD;
position: absolute;
top: -1px;
left: -20px;
}

but i don’t know how to change as following

For example the meanu would appear like this:
A
B
C
And when A is clicked on the menu would appear like this:
A
a1
a2
a3
B
C

thank you!

What I can do if I have sub sub menu ?