prevent dropdown menu from expanding off-page-CodePudding

I am trying to create a responsive dropdown menu with icons and text in full mode and icons only when windows are small (for the top level). For the second level, I still want to show the names in the sub menu.

Full code On codepen:

CodePudding user response：

IF i understand you correctly, then all I did was, go to nav ul ul, and add

  right: 0px;

and that's it. Now obviously you can play with the numbers but this should work and your menu wont hide off page any more.

like this(I took this from your code on codepen)

nav ul ul{
  position: absolute;
  top: 90px;
  border-top: 3px solid cyan;
  opacity: 0;
  visibility: hidden;
  transition: top .1s;

  right:0px;
}

Add the last line and you are done.

came out like this:

happy coding