I'm having some issues with my menu being displayed properly. As you can see from the photo below, my 3rd level menu items are hidden behind the others for some reason. I've gone over my template I'm using and things seem to be alright on that end, otherwise the menu option wouldn't even be displayed. Thus I'm thinking something is wrong with my CSS, though I can't see what that would be. Does anyone have any ideas as to what's going on here?

enter image description here

  • 1
    Can you post the full menu code?
    – Ian
    Commented Mar 8, 2015 at 4:13
  • I'm assuming you mean the php code? IF so, then you can view it here: pastebin.com/BztNyKM7
    – Duder88
    Commented Mar 8, 2015 at 18:46

1 Answer 1


You are correct that this is definitely a CSS issue.

To get the 3rd level menu to show up fully, you'll want to target it and move it X number of pixels from the left until it lines up correctly. If your sub-menu's have a set width, then use that set width to move the 3rd level into the correct position.

For example if my sub-menu's had a fixed width of 200px I'd do:

/* Target the 3rd level nav */
ul.menu ul.sub-menu ul.sub-menu{
  position:absolute; /* Position absolute so we can move the nav element */
  left: 200px; /* Move the nav element 200px from the left based on the width we set above */
  top:0; /* Align the tertiary nav list to the top of the parent menu list */

Check out the codepen here for a full working demo sans dropdown. http://codepen.io/iandbanks/pen/PwdKeB

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.