Make third level dropdown menu closed by default.

jblayney
jblayney used Ask the Experts™
on
Hello,

I have a Wordpress menu, it is a 3 level menu and the third level isn't working properly.

If you visit this link.
http://oalaca.nextmp.net/

Under the profession menu you will see What is Landscape Architecture, the next 3 menu items  ( Why is Landscape Architecture Important?, and  Studying Landscape Architecture only appear when  What Does a Landscape Architect Do) are supposed to only appear when you hover over What is Landscape Architecture?, but they display as default...  

Interesting thing, if I go and scroll over that item and and then scroll off, those 3 menu items close and everything works as it should.

So my question is
1. How do i make What Does a Landscape Architect Do?, Why is Landscape Architecture Important?, and  Studying Landscape Architecture only appear when  What Does a Landscape Architect Do is hovered over?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Place those 3 menu items as children of the menu choice.  Make the new UL display:none; and then on the menu item li_ID NUMBER:hover ul {display:block;}
If you make those last 3 menu items children of the prior LI I can walk you through the rest

Author

Commented:
Hello,

I don't understand what you mean, they are children now,

What Does a Landscape Architect is my main <li>

that has a nested <ul> which contains the other 3
#menu-item-36086 ul {
display:none;
margin:0 0 0 13px;
}

#menu-item-36086:hover ul {
display:block;
}
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Hello,

that as didn't work, it is still open  when you first roll over the  profession menu

Author

Commented:
I tweaked it slightly, this works...


#menu-item-36086 .dropdown-menu {
display:none !important;
margin:0 0 0 13px;
}

#menu-item-36086:hover .dropdown-menu {
display:block  !important;
}
Looks good and I'm glad I could help.  I know how frustrating CSS can be in these instances.

You can tweak the positioning here:

#menu-item-36086 .dropdown-menu {
display:none !important;
margin:0 0 0 13px;
}

Author

Commented:
The positioning is fine, it am just struggling on getting the caret in the right position now
Open a new question and tag me.  Me or somebody else will help sort it out.

Author

Commented:
I figured it out, thank you

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial