I am trying to make my WordPress Submenus appear when using the tab key. I have tried adding the following in my styles without any luck:

header .nav .main .navigation #menu-main-navigation li:focus > ul.sub-menu { display: block; }

Does anyone have any ideas on how I could get this to work?

This currently works when hovering with a mouse pointer:

header .nav .main .navigation #menu-main-navigation li:hover > ul.sub-menu { display: block; }

Here is my menu code:

<ul id="menu-main-navigation" class="menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-    object-page menu-item-home menu-item-21"><a href="/" class="local-link">Home</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="/patients/" class="local-link">Patients</a>
<ul class="sub-menu">
<li id="menu-item-154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-154"><a href="/differences" class="local-link">Differences</a></li>
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><a href="/team" class="local-link">Our Team</a></li>

1 Answer 1


With that structure, try this:

(note this makes assumptions about your base styles)

// your working styles, trimmed down
#menu-main-navigation li > ul.sub-menu { display: none; }
#menu-main-navigation li:hover > ul.sub-menu { display: block; }

// focus is on the link, not the li!
#menu-main-navigation li a:focus + ul.sub-menu { display: block; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.