The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web

Author: Morten Rand-Hendriksen, Creative Director, Pink & Yellow Media
Blog:http://blog.pinkandyellow.com

Expression Newsletter, subscribe now to get yours.

The menu has become a ubiquitous part of most, if not all, web sites, yet it remains a bit of a mystery for designers and developers alike.  What is the perfect menu? And what method is better when creating menus? Should you use layers? Or a table? What about an image-based menu? Or is the answer CSS? And the plot thickens to the point of pea soup when it comes to drop-down menus. Because there are so many different options available, and the proponents of each option are passionate about them, it’s hard for a newcomer to navigate the terrain and find a solution that works.

I don’t pretend to have the right answer to the question of which is the best menu, but after years of experimentation I am firmly planted on the side of the pure CSS drop-down menu.

In this tutorial you will learn to create a Pure CSS Drop-Down Menu pretty much without writing a single line of code. This is done by harnessing the power of Expression Web’s innovative and intuitive Style dialog as well as the power of CSS as a design and layout tool. What is great about the way Expression Web handles CSS is that it lowers the threshold for learning, understanding, and authoring style code and gives people with little to no experience with this code language the ability to create solid standards-based web sites. The many integrated CSS functions--including the Apply and Manage Styles task panes, the Style dialog and the CSS Properties task pane--give beginners as well as advanced users a multitude of different ways of working with this powerful code language and make it easier than ever to create compelling and functional web sites.

Why Should I Go the CSS Route?

There are many reasons why more and more designers are turning to CSS and XHTML as their platform for web design – too many in fact to cover here. When it comes to the issue at hand – menus – there are a couple of advantages that stick out:

• Accessibility
• Manageability
• Customization

Accessibility: The purpose of a web site is to communicate a message to the visitor. But not all visitors are using the same tools to view web sites. The visitor may be visually impaired and relying on a text-to-speech browser, she may be visiting the site on an old computer or her browser may restrict scripts and images for security reasons. If you want your site to be accessible to everyone you need to set it up in such a way that even those who only see the plain-text version of the site still see all the content. For menus this means that they have to be available in a plain-text format and formatted in such a way that they are easy to understand and navigate even without all the bells and whistles. The Pure CSS menu is based on a simple unordered list and is therefore the ideal solution where accessibility is concerned.

Manageability: Web sites tend to evolve and change over time. In practical terms this means that the menu originally created might need to be changed or expanded as the needs of the site owner changes. For the benefit of the owner as well as the designer and developer it is a good practice to create menus that can easily be amended, expanded and reworked without having to go back to the drawing board. Because the Pure CSS menu is based on an unordered list, simply changing the list items themselves will change the menu as a whole and the editor does not need to worry about more complicated issues such as images or scripts.

Customization: In the Pure CSS menu the menu itself is an unordered list while its presentation is defined by styles in the form of CSS code. This means that the designer can step in and make sweeping changes to the appearance of the menu without ever touching the menu items themselves. In other words, design and redesign become less invasive and time consuming.

But enough talk! Let’s get started.

Create Lists and Sub-lists

The genius of the Pure CSS Drop-Down Menu is its simplicity: The menu itself is nothing more than a standard unordered list.

To get started, open a new HTML page in Expression Web called menu.html and save it somewhere on your computer. On the top of the page create a new unordered list by clicking the Bullets button and type out a series of menu items separating each by hitting Enter. Your page should now look like the one in Figure 1.

Here comes the only bit of code you have to write: To make sub-menus (the drop-down items) you need to make lists within lists. This is done by adding the markup for a new list within one of the original list items.

In Code View place the cursor inside the second menu item right before the </li> tag and hit Enter to create a new line. To create a new sub-menu, type “<ul>”. IntelliSense will automatically close the tag with “</ul>” for you. Now you have a new list housed inside one of the original menu items (see Figure 2).

To create sub-menu items go back to Design View. You will see that underneath the second menu item there is now a new indented line inserted. By placing the cursor on this new line and typing out a new menu item name a new list item is automatically created. And when you hit Enter you create new items within this new sub-menu like in Figure 3.

Repeat this process and create several such sub-menus so you have something substantial to work with.

With the basic structure of the menu complete you can switch to Design View if you want to.

Make Each Item a Hyperlink

The next step is to make the different items into links. Since we don’t have anywhere to link to, let’s just make the items link back to the current page. The easiest way to do this is to use the Insert Hyperlink button on the Common Toolbar (Figure 4):

Select the text in the first item and click the Insert Hyperlink button. This opens the Insert Hyperlink Dialog. From here select the current page (menu.html) and click OK (Figure 5). Repeat this process for each of the menu items until they are all hyperlinks.

You now have a fully working menu with sub-menus. From here you can use CSS to style the menu any way you want. The menu can be displayed vertically and horizontally. In this tutorial you will learn to build both and then you can choose for yourself which one you like better.

Create and Attach an External Style sheet

One of the major features of Expression Web is the ability to work with external style sheets as if the styles were internal. In other words you can create, modify and delete styles in an external style sheet without ever leaving the document it is attached to. This makes life a lot easier for designers and developers no matter what their level of skill.

To make a new style sheet go to File, New and CSS. Save the new CSS file under the same folder you saved the menu.html page and call it drop-down.css. With the menu.html file open click the Attach Style Sheet button in the Manage Styles Task Pane (Figure 6). This opens the Attach Style Sheet dialog. Use the browse button to find the drop-down.css file and click OK to attach the Style Sheet (Figure 7). Now you can place styles in the external drop-down.css file from within the menu.html file.

Reset the Padding and Margins

The first step is to get rid of the inherent styling in unordered lists. If you don’t expressively specify a left padding and margin for the ul class, web browsers will make an assumption that each list item is to be indented relative to the other text on the page. To solve this you need to set the padding and margin of the ul class to 0:

With the menu.html page open click the New Style button in the Manage Styles task pane (Figure 6). This opens the New Style dialog. From this dialog you can access and define all available CSS attributes without writing any code of your own.

In the Selector box type “ul” or find ul from the drop-down list. This means that the style will affect all instances of the <ul> tag in the associated page. Directly underneath Selector is a box called Define in. From here you can define where the style code is to be placed. By default it is placed in the Current Page meaning the CSS code will end up within the <head> tag of the HTML page. From the drop-down menu choose Existing Style Sheet and use the Browse button next to the URL field to navigate to the drop-down.css file you just created. Now the style will be placed in the external style sheet but still be associated with the HTML page you are working with.

To reset the padding and margin of the menu items go to the Box category and set the padding and margin top to 0. Leave the Same For All box checked to reset all values. Your New Style dialog should now look like this.

Click OK and you will see that both main menu items and sub-menu items now align with the left side of the page without any indentation.

“Why do I have to reset both the padding and the margin” you ask? Well, it turns out not all web browsers are created equal. So while Firefox, Opera, Google Chrome and Safari all use the margin attribute to indent list items, Internet Explorer uses the padding attribute to do the same thing. Therefore to ensure that the list appears the same across all browsers you must reset both values.

Make it Horizontal by Styling the Main Menu

The next step is to “flip” the menu from a vertical list to a horizontal one. This is achieved by styling the main menu list items housed inside the <li> tags.

 Click the New Style button in the Manage Styles Task Pane to create a new style and give it the Selector name “ul li”. Make sure the new style is defined in the drop-down.css file as before.

Technically you can just call it “li” but when it comes to CSS it is often good practice to do some micromanaging: If the style selector is set to “li” it will apply to all list items whether they are in an unordered list (<ul>) or an ordered list (<ol>). By making the selector more specific you can create separate custom styles for each type of list.

To make the menu align horizontally across your screen in a visually pleasing manner you need to do several things: Tell the list items to align horizontally, define the width of each line item and get rid of the bullets or “dots” that precede each item. All of this is can be done in the ul li style:

To realign the list items to the horizontal plane, go to the Layout category, set the display attribute to inline and the float attribute to left. Click Apply and you will see that the list items are now next to one another but the list looks messy. To “clean up” a bit, go to the Position category and set the width attribute to 150px. This gives each list item the same width.

The exact width depends on how wide you want each button to be and how much text is in each button. If you make the button too narrow the text will “jump” to the next line and the button will have two lines of text instead of one.

To get rid of the bullets, go to the List category and set the list-style-type attribute to none. When you click OK you should end up with a menu that looks something like what you see in Figure 9.

Now that the menu aligns properly you should add some styling to make it look a little better. In CSS you define styling that is going to apply to all instances of the affected content as “high up” in the cascade as possible, so things like font family and font size should be defined in the ul li style:

From the Manage Styles task pane, right click on the ul li style and select Modify Style. This reopens the same dialog you worked with earlier and you can now change or add attributes in the same style. Under Font set the font-family attribute to Arial, Helvetica, sans-serif, font-size to 0.9em and text-transform to uppercase  (Figure 11). These settings will now apply to all text inside list items unless something else is specified. Finally to give each menu item a little more “breathing space” go to the Position category again and set the height attribute to 30px. This last step will come into play later on.

At this point it is a good idea to test the page in several browsers to make sure everything looks the way you intended. Save the menu.html page and Expression Web will pop open the Save Embedded Files dialog (Figure 12) where you are asked if you want to save the changes you have made to external files (in this case the drop-down.css style sheet). Click OK and hit F12 to open the page in your default browser.

Style the links

Even though the menu now lines up properly, we still need to make it more interesting visually.. The links are all blue, they have an ugly underline and there is no background color. To bring some style to the substance we are going to create dedicated styles for the links themselves:

Using the New Style button again, open the New Style dialog and give the style the selector “ul li a”. This style will now affect all links within list items within unordered lists.

Firsts let’s give the links a background color and get rid of that underline: Under the Background category set the background-color attribute to gray (#808080) by clicking the color box next to the text field and opening the More Colors dialog (Figure 13). Now go to the Font category and set the color to white (#FFFFFF) using the drop-down menu. To get rid of the underline check the none box under the text-decoration attribute. Click OK to apply the changes and you’ll see that there’s a bit of a problem: The background only covers the text itself leaving a lot of white space around each item (Figure 14).

To solve this we need to increase the area the link covers. This is done by defining the height and width of the link to match the list item boxes you created earlier. In the Manage Styles task pane right click the ul li a style and select Modify Style to get back to the Modify Style dialog.

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to "fill out" the area with the background colour, go to the Layout category and set display to block.

Now when you hit Apply, the buttons are the right size but the text is aligned all the way to the left. To indent the text from the left edge go to Box, uncheck the Same for all option under padding and set the left padding to 8px. Since you have now added 8 pixels to the width of the box you need to subtract them from the overall width of the box so go back to Position and reduce the width attribute to 142px. Click OK to apply the new style.

Make the Links React

If you test your page in a browser at this point you’ll see that the menu looks right but the buttons don’t react to your mouse hovering over them. To do this you need to make a pseudo-class for the links. A pseudo-class is one that is triggered by user interaction rather than simply displayed all the time. Pseudo-classes are applied to selectors such as anchors (links) with a colon like this:

a:hover – triggered when the mouse hovers over the link

a:visited – triggered when the link has been visited

In this case we need to make a separate style for the hover state of the link. Create a new style as before and set the selector name to “ul li a:hover”. Go to Background and set the background-color to #666666. This will change the background color to a darker gray when the button is hovered over. Click OK, save and test the page in your browser to make sure the buttons react. Figure 15 shows the menu as it appears in Firefox with one of the buttons hovered over.

Note that you can’t test pseudo-classes from within Expression Web’s Design View. You have to test them in a real browser to see if they work.

Different Menu, Different Style

Right now the main menu and the sub-menu items all look the same. Ideally you want them to be somewhat different to visually tell the visitor she is accessing a different element. This can be done with some further micromanaging of styles:

Create a new style and give it the selector name “ul li ul li a”. This selector will only affect links within list items that are contained within an unordered list that is contained within the list item of another unordered list. Quite a mouthful but it serves us perfectly. Go to the Background category and set the background-color to #666666. If you paid attention you’ll notice that this is the same color as the hover state you just defined. You’ll see why in a few minutes. Click OK to apply the style and create a new style with the selector name “ul li ul li a:hover”. Set the background-color of this one to #333333 and click OK to apply the style.

You should now have 6 styles that are progressively more specific. Save and test the page in your browser again to make sure it all works.

That’s All Great, But I Thought this Was a Drop-Down Menu

At this point you’re probably asking yourself that very question. And here, finally, is the answer: To make the sub-menus appear and disappear we are going to use the :hover pseudo-class in conjunction with the visibility attribute for some CSS trickery:

First to hide the sub-menus. Create a new style and give it the selector name “ul li ul”. This style affects all sub-menus. Under the Layout category you will find the visibility attribute. Set it to hidden. This hides the sub-menu from the screen as well as from mouse clicks.

To make it visible again create a new style and give it the selector name “ul li:hover ul”. Note that the :hover pseudo-class is placed on the first list item before the second unordered list. This style will only affect unordered lists that are found under list items that are currently being hovered over inside unordered lists. Go to Layout and set the visibility attribute to visible as in Figure 16. Click OK to apply the new style and save all changes.

Now when you test the page in your browser you’ll see that the sub-menus are invisible until you hover over the main menu buttons. Figure 17 shows the fully working Pure CSS Drop-Down Menu working in Opera.

The Menu Works Everywhere ... Almost

The Pure CSS Drop-Down Menu as presented here has been tested and works in Microsoft Internet Explorer 7, Mozilla Firefox, Opera, Safari for Windows, Google Chrome and several other browsers. However, the drop-down feature does not work in Internet Explorer 6 (IE6) – an older version of IE that is still in use by a many people. This is because IE6 does not support pseudo-classes attached to non-anchor elements like the list item. This problem can be circumvented by utilizing JavaScript but this takes away the elegance of the solution and also introduces new problems. There are proponents who say you still have to design with IE6 in mind but I am not one of them. IE7 is now over 2 years old and Microsoft will roll out IE8 in the coming months so designing for a browser as old as IE6 would be a bit like releasing The Dark Night on VHS only because some people still don’t have a DVD player.

Conclusion

The Pure CSS Drop-Down Menu is a clean, simple and elegant menu that is easy to build, modify and edit for designers as well as end users. Because it is based on a simple unordered list structure the end-user can easily add, remove or edit the menu items without having to worry about graphics or other non-content elements. Likewise the menu can easily be restyled and redesigned without interfering with the content because the styling is separated entirely from the content itself. The code generated by Expression Web is 100% standards compliant and should appear the same across most if not all browsers and platforms. And like I promised in the very beginning, it can be built, styled and modified with little-to-no actual code writing or editing.

Morten Rand-Hendriksen is the owner and creative director of Pink & Yellow Media, a Vancouver (Canada) based digital media and design company focusing on small and medium business. After being introduced to the Microsoft Expression Suite in 2007 he changed his company profile and they now exclusively use Expression Web 2 as their web development and deployment platform. Morten is the author of the book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours and blogs about Expression Web, CSS and other design related topics at http://blog.pinkandyellow.com

This article appeared in the November Expression Newsletter, subscribe now to get yours.