Styling the primary links menu

Now that we have a menu at our disposal, let us look at styling it. In this recipe, we will look at how to go about theming the menu via CSS when using the myzen theme.

Getting ready

We will be using the myzen theme created earlier in this book as the example theme in this recipe. The menu items used are those created in the previous recipe.

How to do it...

By inspecting the markup of the page, we should be able to verify that the primary links in the myzen theme are contained within a DIV with ID navigation. It is important to use tools, such as Firebug, to familiarize ourselves with the structure of this DIV and its contents in order to theme it efficiently. The markup in our example theme looks something like the following:

<div id="navigation">
<div class="section clearfix">
<ul class="links clearfix" id="main-menu">
<li class="menu-201 first">
<a title="" href="/sites/cvs/drupal/mysite/about">About</a>
</li>
<li...