Most CSS dropmenus tend to line up the top of the list of children <ul> with the top of the parent <li>.

But that breaks down easily the longer the menus and lengthier the list of children, which then drop out of the view port, create scrolling issues and so forth.

Given this codepen how can the submenu be aligned with the height of the parent menu, say offset down by 50px ?

CodePudding user response：

You'll have to offset up to hit the top off the viewport by adding a sub-menu class and changing the relative parent:

.li-sub ul {
  top: 0px !important;
  left: 250px !important;
 }

Here's the same fiddle but with the adjustments: https://jsfiddle.net/getr0cou/4/