Styling your Submenu

Placement of submenu items #

Just like with the horizontal orientation of the top-level menu, we’ll use display: inline-block on the elements that need to line up horizontally with each other. It looks like we can use percentages for the wrapper divs that delineate text from the image – something like 40%/60%, and 50%/50% for the two inner columns. We need to size the text correctly, align it all to the left, and remove the default bullet point configuration of ul. Lastly, we can add the border to the header text and add paddings to everything.

By the way, the technique of excessively using high-contrast background colors to make elements clearer while aligning applies for inner divs just as much as the outer.