How to make submenu of equal width with the menu items of the first level?

Make a submenu for the lesson. Here submenu codepen.io/freeman0204/pen/RRKyqd the Author does so
.menu ul li:hover ul {
 display: block;
 position: absolute;
}


gives a submenu position: absolute; and they had become the same width as the menu of the first level. And I have a little bit sticks out, why is that?
And I have a question on working position: absolute;

The width of an element with position: absolute is set on the content.

It's clear what happened.

The coordinates of the top/bottom/left/right for the new location are measured from the nearest positioned parent, i.e. a parent with a positioning different from static. If such a parent is not something on the document.

But for some reason the positioning is relative to the first menu level, not document why?
July 8th 19 at 12:04
1 answer
July 8th 19 at 12:06
May be still a little something from the lesson missed?

You can, for example, so to correct:
.menu ul li {
 position: relative;
}

.menu ul li:hover ul {
 display: block;
 position: absolute;
 left: 0;
 right: 0;
}

Find more questions by tags CSSHTML