Styling your Submenu
Understand how to style submenu items within a dropdown menu by applying CSS properties such as inline-block display, color variables, vertical-align, and box-sizing. Learn how to properly size and align text and images, use calc for mixed-unit computations, and finalize submenu layout for a polished frontend component.
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 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 ...