drop-down menus in WordCamp Meta Theme "WordCamp Base Redux" Main Menu do not work.

[faddah]

set-up: WordPress 4.3.1 through hosted wordcamp.org Meta. WordCamp Base Redux theme. our site: ​http://portland.wordcamp.org/2015.

issue: when nesting menus off main menu, the sub-menus do not appear when either hovering or clicking once on the menu — standard. no amount of fiddling with CSS changes this.

steps to reproduce —

1. on hosted wordcamp.org Meta, use current WordCamp Base Redux theme.
2. either under WP Dashboard > Appearnce > Menus, or WP Dashboard > Appearance > Customize > Menu Locations > Primary, add menus from published Pages to the Primary menu, add a new menu and have two sub-menus under it from two different all ready created Pages.
3. save the menu set-up.
4. go to see that changes on your wordcamp.org site that uses this WordCamp Base Redux theme.
5. roll over and/or click once in the browser on what should be the drop-down menu you just created.

expected behavior —

the menu should drop down and show the two nested choices you added. This is how it works on nearly every other WP theme.

issue —

instead of the getting a drop-down, it doesn't happen, and clicking on the top choice menu only takes to whever that top choice points (or nowhere, if it isn't linked to any page).

the menu should drop down when rolled over or clicked once — this is the behavior exhibited in other WP themes.

i have tried methods i know to make it a drop-down using CSS in the WP Dashboard > Appearance > Edit CSS, like the ones used here​http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu or here​http://blog.teamtreehouse.com/create-simple-css-dropdown-menu, but nothing works.

i've included our custom CSS from WP Dashboard > Appearance > Edit CSS, that we are using for this theme at WordCamp Portland 2015​http://portland.wordcamp.org/2015/, in a file attached here.

[faddah]

our custom CSS from Dashboard > Appearance > Edit CSS on the WordCamp Portland 2015 use of the WordCamp Base Redux theme.

[iandunn]

It worked for me after (temporarily) removing all your custom CSS, so it seems like something about your CSS is causing the conflict.

Part of the problem is these styles:

.main-navigation .sub-menu, .main-small-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    text-align: left;
    background: #48424a;

.sub-menu {
    position: absolute;
    display: none;
    background: #dedede;

If you remove those, you'll see the submenu is displayed, but partially hidden, possibly because of a z-index conflict.

[faddah]

hello @iandunn,

thank you for your reply.

i did not add all the custom CSS, that was done by our web site dev/designer. i'm the site maintainer through the end of WordCamp Portland (Oct. 24th). the parts i've added in CSS are deliniated by comments stating that it's from me (faddah) for some sort of fix.

per your reply comment suggestion, i am able to comment out the second one, the ".sub-menu {..." as it is one of the ones i added to try and fix the menu issue. that alone did not fix anything. however, if i remove the styles on the first one (.main-navigation, .main-small-navigation {... - plus the .sub-menu nested below that for each of them) it takes out all the formatting we need for that menu on our site. also, if i _do_ comment out that entire section, as you suggest, i lose the menu formatting _and_ the drop-down menu still does not work.

could you suggest which specific lines to comment out, based on line numbers, please? thank you for your help.

best,

— faddah

portland, oregon, u.s.a.

Replying to iandunn:

It worked for me after (temporarily) removing all your custom CSS, so it seems like something about your CSS is causing the conflict.

Part of the problem is these styles:

.main-navigation .sub-menu, .main-small-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    text-align: left;
    background: #48424a;

.sub-menu {
    position: absolute;
    display: none;
    background: #dedede;

If you remove those, you'll see the submenu is displayed, but partially hidden, possibly because of a z-index conflict.