Horizontal Menu with Multiple Submenus

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><a href="index.html">Home</a></li> <li><a href="about.html">About</a> <ul> <li><a href="aboutus.html">Our Team</a></li> </ul> </li> <li><a href="services.html">Services</a> <ul> <li><a href="cardio.html">Cardiovascular</a> <ul> <li><a href="perfusion.html">Perfusion</a></li> <li><a href="ptca.html">PTCA & IABP</a></li> <li><a href="ecmo.html">ECMO</a></li> <li><a href="tavr.html">TAVR</a></li> </ul> </li> <li><a href="bloodmanagement.html">Blood Management</a> <ul> <li><a href="autotransfusion.html">Autotransfusion</a></li> <li><a href="plateletgel.html">Platelet Gel</a></li> </ul> </li> </ul> </li> <li><a href="products.html">Products</a> <ul> <li><a href="disposables.html">Disposables</a></li> <li><a href="products.html">Featured Products</a></li> </ul> </li> <li><a href="contact.html">Contact</a> <ul> <li><a href="inquiries.html">Employment Inquiries</a></li> <li><a href="contactform.html">Contact</a></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!