How to use two floats in navigation - html

Question

I've been trying to get a dropdownbar in my navigation which displays the elements vertically. The dropdownbar is already here and works fine but I'm having some trouble getting it to display vertically. Thanks in advance for taking a look, sorry if it's a rookie mistake!
I've already tried using floats, vertical-align, content-align.
.nav {
border-color: lightgray;
background: transparent;
padding: 0;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background: transparent;
display: inline-block;
}
li {
float: left;
}
li a {
display: block;
padding: 16px 54px;
margin-right: 30px;
text-align: center;
text-decoration: none;
color: dimgray;
/* border-right: 1px solid dimgray; */
/* border-bottom: 1px solid dimgray; */
}
li:last-child {
border-right: none;
}
li a:hover {
background-color: dimgray;
color: white;
}
.active {
background-color: #696969;
color: #ffffff;
pointer-events: none;
}
ul ul {
display: none;
}
ul li:hover>ul {
display: flex;
float: top;
vertical-align: top;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
<nav id="navigatie" class="nav">
<h1 class="outlineNaam">navigatie</h1>
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li class="subnav"><a>Over ons</a>
<ul class="subnav">
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>

Answer 1

U should use flex-direction: column:
ul li:hover > ul {
display: flex;
flex-direction: column;
/* float: top; */
vertical-align: top;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
Also float property has no value "top":
see on mdn
and the float property and vertical-align is ignored in a flex container.
From the flexbox specification:
3. Flex Containers: the flex and inline-flex display values
A flex container establishes a new flex formatting context for its
contents. This is the same as establishing a block formatting context,
except that flex layout is used instead of block layout.
For example, floats do not intrude into the flex container, and the
flex container’s margins do not collapse with the margins of its
contents.
float and clear do not create floating or clearance of flex item, and
do not take it out-of-flow.

Answer 2

You'll simply need to apply flex-direction: column to the .subnav (you did select it using ul li:hover > ul) which will make the .subnav elements align vertically as columns.
Also, there is not value of top for the float rule and the vertical-align doesn't affect flex elements.
So, here's a working demo :
.nav {
border-color: lightgray;
background: transparent;
padding: 0;
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background: transparent;
display: inline-block;
}
li {
float: left;
}
li a {
display: block;
padding: 16px 54px;
margin-right: 30px;
text-align: center;
text-decoration: none;
color: dimgray;
/* border-right: 1px solid dimgray; */
/* border-bottom: 1px solid dimgray; */
}
li:last-child {
border-right: none;
}
li a:hover {
background-color: dimgray;
color: white;
}
.active {
background-color: #696969;
color: #ffffff;
pointer-events: none;
}
ul ul {
display: none;
}
ul li:hover>ul {
display: flex;
flex-direction: column;
border-left: 1px solid dimgray;
border-bottom: 1px solid dimgray;
}
<nav id="navigatie" class="nav">
<h1 class="outlineNaam">navigatie</h1>
<ul>
<li><a class="active" href="index.html">Home</a>
<li>Producten</li>
<li>Personaliseren</li>
<li class="subnav"><a>Over ons</a>
<ul class="subnav">
<li>Blog</li>
<li>Contact</li>
<li>FAQ</li>
</ul>
</li>
</ul>
</nav>