Problem with expanding elements of navigation - used flexbox method - css

Question

When the cursor is hovered over first level navigation (about, what we do, projects, contact) a second level navigation is shown. In this case the whole ul (from first level navigation) and the navigation field is extended (green and blue background)
I would like to extend first navigation by second after hover but the ul and navigation shouldn't expand (green and blue background shouldn't expand)
In the picture below is result what I want to accomplish using only flexbox method
I accomplished that by position absolute property but I learn flexbox method and I want to accomplish it using only flex-box method without changing HTML
/* global */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
line-height: 1.7;
font-family: "Inconsolata", monospace;
color: #341f97;
}
.container {
max-width: 1140px;
padding: 0 20px 0 20px;
}
.section {
padding: 96px 0 96px 0;
}
/* navigation */
.navigation {
background-color: #2e86de;
padding-top: 12px;
padding-bottom: 12px;
}
.navigation ul {
list-style-type: none;
background-color: green;
/* padding: 0; */
/* margin: 0; */
}
/*
// .navigation li {
// display: inline-block;
// position: relative;
// margin-right: 36px;
// }
// .navigation li ul {
// position: absolute;
// text-align: center;
// }
*/
.navigation a {
text-decoration: none;
color: #c8d6e5;
}
.navigation a:hover {
color: yellow;
}
/*
// .navigation ul ul li {
// // display: block;
// margin-bottom: 12px;
// }
// .navigation ul ul {
// display: none;
// }
// .navigation li:hover ul {
// display: block;
// background-color: green;
// // text-align: center;
// }
*/
.navigation ul {
display: flex;
background-color: green;
}
.navigation ul li {
flex-basis: 10%;
text-align: center;
/* background-color: gray; */
}
.navigation ul ul {
display: none;
flex-direction: column;
background-color: red;
}
.navigation ul li:hover ul {
display: flex;
}
<link rel="stylesheet" href="stylesheet/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Roboto:wght#300;400;700&family=Saira+Condensed:wght#300;400;700&family=Saira:wght#300;400;700&family=Signika:wght#700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" />
<nav class="navigation">
<div class="container">
<ul>
<li>
about
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
what we do
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
projects
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
contact
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 1

It expands your nav element because the second ul element is positioned statically which means when it appears on the hover event it pushes the nav down because the nav element tries to contain the child ul elements. If you use position: relative on the first menu li element then use position absolute on the 2nd, the rendering of it is taken out of the flow of the parent and it appears over the top. I've annotated the code so you can see what I've changed. There's a good explainer by Kevin Powell
/* global */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
line-height: 1.7;
font-family: "Inconsolata", monospace;
color: #341f97;
}
.container {
max-width: 1140px;
padding: 0 20px 0 20px;
}
.section {
padding: 96px 0 96px 0;
}
/* navigation */
.navigation {
background-color: #2e86de;
padding-top: 12px;
padding-bottom: 12px;
}
.navigation ul {
list-style-type: none;
background-color: green;
/* padding: 0; */
/* margin: 0; */
}
/*
// .navigation li {
// display: inline-block;
// position: relative;
// margin-right: 36px;
// }
// .navigation li ul {
// position: absolute;
// text-align: center;
// }
*/
.navigation a {
text-decoration: none;
color: #c8d6e5;
}
.navigation a:hover {
color: yellow;
}
/*
// .navigation ul ul li {
// // display: block;
// margin-bottom: 12px;
// }
// .navigation ul ul {
// display: none;
// }
// .navigation li:hover ul {
// display: block;
// background-color: green;
// // text-align: center;
// }
*/
.navigation ul {
/* added this purely for cosmetic reasons to keep your menu text on one line and put a gap between them */
white-space: nowrap;
gap: 1rem;
display: flex;
background-color: green;
}
.navigation ul li {
/* added this */
position: relative;
flex-basis: 10%;
text-align: center;
/* background-color: gray; */
}
.navigation ul ul {
display: none;
/* added this */
position: absolute;
flex-direction: column;
background-color: red;
}
.navigation ul li:hover ul {
/* added this */
width: 100%;
display: flex;
}
<link rel="stylesheet" href="stylesheet/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Roboto:wght#300;400;700&family=Saira+Condensed:wght#300;400;700&family=Saira:wght#300;400;700&family=Signika:wght#700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" />
<nav class="navigation">
<div class="container">
<ul>
<li>
about
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
what we do
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
projects
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>
contact
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</div>
</nav>