Help with making hidden sub-menu appear on hover

Hi all,

I’m building a new site using Wordpress. I’ve got a custom navigation menu in a left hand sidebar and I want to be able to have sub-menus for some of these links. I’ve got both menus styled how I want them, but I’m not clear on how to make the sub-menu go from hidden to displaying once you hover over the main menu link.

Here’s an ugly page mock-up with the static sub-menu on display (hopefully it’s obvious, but it’s at the bottom as a sub-menu to the ‘Guide’ button) :

I know it’s something like ‘display:none’ on the sub-menu and then targeting the right element with ‘:hover {display:block;}’ to make it show, but I’ve tried a couple of tuts and I can’t get it working. Appreciate any help :slight_smile:

So you basically need a point in the direction of how to make a dropdown? Never use that display:none/block trick to get dropdowns showing. It’s quirky.

Instead, use this example, which utilizes a huge left margin to hide, and setting it to 0 to get it to show :).

Let us know if you can’t adapt your menu to fit.

Hi Ryan,

Thanks for the reply - I’ve only had chance to get back and look at this today. Thanks for the ‘quirks’ warning - always to be avoided!

I’ve managed to get that example working - spent ages fiddling about and then realised that Wordpress creates classes for each menu item (id=“menu-item”), so I set it up like this:

.sub-menu {      /* throws the menu off the page as per the above example*/

.menu-item:hover ul { /*position the menu where required on hover*/

I know this is pretty basic for most people, but thought I’d share the solution. As a general point, the automatically assigned classes in Wordpress seem pretty handy!

Glad you were able to figure it out, however that post confused me. You have .sub-menu hidden and on .menu-item:hover you have a <ul> brought into v iew via a left: (not margin-left), assuming that that “ul” there matches .sub-menu.

I’m not going to question it really. If it’s working for you then by all means keep it :).

Yeah that’s right - the ul = submenu. If I could target the submenu in the same way I would do - it would be certainly be clearer - how would you target it?

I more or less assumed you couldn’t target a class as a child class i.e .menu-item:hover.sub-menu - that wouldn’t work would it?

The .sub-menu positioning is relative to the .menu-item so it appears in just the right spot. If there are better ways of doing both these things then I’m open to suggestions! Likewise, if these are piddling pointless details then feel free to ignore my post! This is what comes from learning by guessing how to do things…

If you did .menu-item:hover .sub-menu, that’d work. It’s basically selecting that same <ul>. Unless I misunderstood you of course. I wouldn’t rely on pixel perfect design because there will always be at least a few browsers which are at least a pixel or two off, which can throw your whole design out.

Guessing is ok, if you back it up with some testing. It’s normal :). Normally floats are to be used for positioning. Needing to use relative positioning, and absolute positioning, for the layout of elements are rare, and quite frankly you should avoid it unless the situation calls for it (it’s just a case by case basis).

Ah ok, I’ll edit and use that targeting then. Thanks for the info on positioning too Ryan, I’ll try and tighten up my code to take account of that. Really appreciate your time and input :slight_smile:

You’re welcome scampsall :). Feel free to ask more questions in the future.