To achieve this layout, you can utilize the display: inline-block; property and value. This CSS property instructs the element to act like a paragraph by aligning from left to right on a single line until the available width is exhausted, at which point it wraps onto a new line.
This effect can be accomplished by setting the UL elements to inline-block, causing them to be aligned next to each other. By applying the same inline-block to the LI elements inside the ULs, they are then aligned in a horizontal manner. To observe the different outcomes, try removing the display: inline-block; declaration in the specified selectors below.
Inline-block is compatible with IE8 and later versions. For more information on browser compatibility, refer to this Can I Use It link.
Please note that the additional CSS styles (height and background) are purely for visual representation and do not affect the functionality of the code
Explore an interactive demonstration on JSFiddle: Demo JSFiddle
ul {
display: inline-block;
height: 40px;
}
ul li {
display: inline-block;
height: 40px;
background: red;
}
ul li ul.sub-menu li {
background: blue;
}