Thanks for the report and suggestion. I'll re-examine this when I next release the pure-site.

It's possible that I started with auto but discovered a certain browser was having trouble unless I explicitly set the height, so keep browser vagaries in mind.

I recently found out this gets worse when you have more menu items - they get cut off after the 14em.

@inexist3nce @qskousen only problem with adding height:auto is that the transition animation does not work anymore, since you cannot transition to auto. This might be a case where the application either removes the animation and thus can have a flexible height. Or just manually calculates the height based on how many items are in it.

Wondering if this ties into my issue where child-items in the vertical version of the nav don't open on hover. Can be seen here in this CodePen.

Or is this expected behavior and I need to handle showing child items on my own in the vertical version of the menu?

The following code seems to solve my issue, as long as it overrides the default yui-pure-css styling:

.pure-menu-has-children {
  position: relative;
}

.pure-menu-children {
    left: 3em; // or a percentage, maybe
    top: 2em;
}

Also found the need to add text-align: left to the pure-menu-link since the vertical menu items are coming up at the full width of the viewport with text center-aligned.

Seems like I'm either doing something wrong, or the base case could be more intuitive.