Horizontal Menu with Multiple Submenus - css

Question

I created a menu with multiple submenus. I've been searching for ways to make the submenus dropdown in a horizontal fashion from the original menu to the submenu, and then to the final submenu (which I can sometimes get by accident, but then I screw everything up and go back to my original horizontal menu with vertical submenus). I've tried changing them to in-line block, static, and block, but I can't force it to work. Is there an easier way? What am I missing?
/* Navigation Bar Menu */
nav {
color: #F00;
min-width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
float: none;
white-space: nowrap;
}
nav a {
display: block;
padding: 0 10px;
color: #F00;
font-size: 20px;
line-height: 30px;
text-decoration: none;
}
nav a:hover {
color: #FFF;
background-color: #CCC;
transition: all .3s ease;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover>ul {
display: inherit;
transition: all .3s ease;
}
nav ul ul li {
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Our Team</li>
</ul>
</li>
<li>Services
<ul>
<li>Cardiovascular
<ul>
<li>Perfusion</li>
<li>PTCA & IABP</li>
<li>ECMO</li>
<li>TAVR</li>
</ul>
</li>
<li>Blood Management
<ul>
<li>Autotransfusion</li>
<li>Platelet Gel</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>Disposables</li>
<li>Featured Products</li>
</ul>
</li>
<li>Contact
<ul>
<li>Employment Inquiries</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Sorry if I'm missing something, but is this what you're looking for?
https://codepen.io/will0220/pen/VMMgMb
This
nav ul ul li {
display: list-item;
}
Needs the display property removed, display: list-item forces it into rows. Hope this helps!