Designer’s Css Course

Rather than take you through the lengthy and complex CSS of the multi-level menu, let’s look at a more simple example to help you understand the concepts behind it. This is a fun exercise to write for yourself from scratch. It’s not too complex, but it incorporates just about every CSS technique that we have seen so far. So once you can successfully write the CSS for this menu, you will feel more confi dent in tackling all kinds of CSS development problems.

In this exercise, we will create a two-level menu: a horizontal row of choices and a menu that drops from each one when hovered. Let’s start with the markup for the top level.

<div id=”multi_drop_menus”>
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
</ul>
</div>

As you can see, this is the same markup structure as the navigation component from earlier: a div that contains an unordered list element that contains two list items that each contains a link. Getting these elements styled into the fi nished menu so they are accurately aligned inside one another like little Russian dolls is key to getting the menu styled correctly. Let’s start by applying a different colored border or background to each of the four element types (div, ul,
li, and a) so that we can keep an eye on their relationship to one another as we work.