Prevent Flexbox List Items Changing Width Of Parent When Hover Over Children

I have a series of list items and some have a child list, containing sub navigation links. I'm using CSS to create a hover effect by having display: none on the child

an

Solution 1:

Thanks to @Temani Afif and @Pete - adding

positon: absolute;
top: 100%

on the child <ul> has fixed this issue. Thanks - much simpler than I thought it may have been!