Styling your Submenu
This lesson briefly explains how to approach styling and how to implement them via code.
We'll cover the following
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 div
s 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 div
s just as much as the outer.
Get hands-on with 1200+ tech skills courses.