Tulipe: CSS drop-down menus with an alternative for Internet Explorer

Eric Shepherd, Designer

www.csszengarden.com/088

THE FRAGILITY OF A TULIP missing one petal in a photograph he'd taken captured Eric Shepherd's imagination. He produced a horizontal layout with drop-down menus running across the top for the compelling Tulipe.

The ability to create pure CSS drop-down menus was first demonstrated a few years ago on Eric Meyer's site CSS/ Edge (www.meyerweb.com/eric/css/edge/menus/demo.html), but the workarounds are necessary to accomodate Internet Explorer.

The trick, then, is to create the optimal design, while stepping backward with an alternative design specifically for Internet Explorer and still maintaining some of the design's integrity and all of its functionality. Shepherd was able to do just this, using some savvy workarounds.

Exploring Pure CSS Menus

Creating pure CSS menus is a joy. It's easy to do, and there's power in the way you are able to use a range of styles and positioning for different results. Perhaps most interesting, though: You never have to touch a line of JavaScript (FIGURE 1).

Figure 1. One of the drop-down menus in Tulipe.

In the code below, you'll find the basic markup for a list-based navigation menu. The markup is just a simplified version of what you'll ultimately see in Tulipe, using a single div instead of the multiple divs used within the Zen Garden markup, and a list of the links for one of the actual menus.

 <div > <h3>Select a Design:</h3> <ul> <li><a href="#">Gardenias de Perfume</a> by <a href="#">Armando Sosa</a></li> <li><a href="#">Pneuma</a> by <a href="#">Adam Polselli</a></li> <li><a href="#">Birdhouse</a> by <a href="#">Justin Vilela</a></li> <li><a href="#">Defiance</a> by <a href="#">James Ehly</a></li> <li><a href="#">Mediterranean</a> by <a href="#">John Whittet</a></ li> <li><a href="#">Austrian&#8217;s Dark Side</a> by <a href="#">Rene Grassegger</a></li> <li><a href="#">Invitation</a> by <a href="#">Brad Daily</a></li> <li><a href="#">Odyssey</a> by <a href="#">Terrence Conley</a></li> </ul> </div> 

Examining this markup without style in any browser, including Internet Explorer, will simply render an unordered list (FIGURE 2).

Figure 2. The unstyled markup is rendered as an unordered list in any browser.

While completely useful as is, it's not very pretty. Adding some CSS will fix this up right away. The code below shows the CSS that will style the body and links.

 body {    font-family: tahoma, arial, helvetica, sans-serif;    font-size: small;    background-color: #F2F4EE; } a:link, a:visited {    font-weight: bold;    text-decoration: none;    color: #998; } a:hover {    color: #887;    text decoration: underline; } 

As you can see in FIGURE 3, the styles are applied. Notice that the hover underline does show up in Internet Explorer as the pointer hovers over a link.

Figure 3. Applying some basic styles to the menu, including a hover style that is supported in Internet Explorer.

So far, so good, but this is where things get a bit tricky: Now it's necessary to change the display of the ul element to a value of none. This will hide the list and allow you to activate it only when the pointer hovers over it:

 ul {    display: none; } 

Add that to the CSS, and the list is completely hidden in all CSS-compliant browsers. To make it reappear, you'll add the dynamic pseudo-class :hover and set the display value to something other than nonein this case blockso that as the pointer hovers over the #menu element the ul will become visible again. You'll also notice some additional styles for both the ul and li items in the following code:

 #menu:hover ul {    display: block;    border: 1px solid #776;    margin: 5px;    padding: 5px;    width: 175px;    list-style-type: none; } li {    margin: 0;    padding: 3px;    border-bottom: 1px solid #887; } 

If you try this out in a browser that supports the :hover pseudo-class for arbitrary elements, the list menu now appears upon hover. Isolating this particular menu and putting some additional styles back in, you see the Tulipe menu beginning to take shape (FIGURE 4). Unfortunately, in Internet Explorer the list remains hiddenall you see is the header (FIGURE 5).

Figure 4. The hidden list is displayed upon hover in compliant browsers, like Mozilla or Opera.

Figure 5. The list can't be displayed upon hover because of Internet Explorer's lack of support for the :hover pseudo-class outside of the anchor element.

Drop-Down Menus in Tulipe

If you look at Tulipe in its progressively enhanced mode, you'll see the premise described aboveHTML lists achieve the menu structure, and a host of styles create the hover behavior and make them look great. But because of the same Internet Explorer problem you saw occur while going over the methodology used, Shepherd had to think through the CSS very carefully. The goal was allowing the sophisticated effect to shine through in more robust CSS browsers, but to hide those styles from Internet Explorer and send an alternate style that, while not as sophisticated, would work within Internet Explorer and avoid hiding the menu without destroying the design.

Turnabout Is Fair Play

So there are two important discoveries to note about Internet Explorer here. First, it doesn't allow the pseudo element selector :hover to be applied to anything other than a link. As a result, you cannot replicate the hover effects, so the drop-down itself isn't going to be possible with this approach. Second, we know that Internet Explorer does not understand certain types of selectors. One such selector is the child selector, which makes them a first-line defense when it comes to hiding styles from Internet Explorer. From Tulipe:

 #linkList2 ul > li 

Another pseudo-class not supported by Internet Explorer is :first-child.

 #linkList2 #lselect li > a:first-child 

Here, the CSS is interpreted as: The first link in any list item found within the element with an id of lselect that descends from linkList2 gets the corresponding styles, as long as the browser supports them. Because Internet Explorer doesn't, it will simply ignore them.

The lack of support for these selectors and pseudo-classes is one of the more frustrating aspects of coding for Internet Explorer, but the good news is you can use these flaws to your advantage when working around the problem.

Separating Styles

Using CSS for rich, beautiful drop-down menus while still supporting Internet Explorer involves declaring backup styles that it can interpret, such as:

 #linkList2 {    position: absolute;    top: 65px;    left: 750px; z-index: 2000;    height: 150px;    margin: 0;    padding: 0;    width: 1350px; } #linkList2 a {    border: 0; } 

This is just one small part of the CSS, which of course you can view in detail within Tulipe's actual CSS file. Any styles that can be delivered to Internet Explorer are provided, but then extra styles that can be interpreted by more compliant browsers are applied in those browsers. These styles are easily identifiable due to their use of the child selector:

 #linkList2 #lselect li > a:first-child {    display: block; } html > body #linkList2 li {    margin: 0;    padding: 3px;    border-bottom: 1px solid #887; } 

By separating out the styles using this workaround, Shepherd was able to achieve usable menus for Internet Explorer (FIGURE 6). While they're not as sexy as the real thing, they're still attractive and clearly navigation menus.

Figure 6. The Internet Explorer version of the menus. Not as pretty as the drop-down menus, but still usable.

Advancing CSS

There's another bit of noteworthy CSS relating to the menu effects in Tulipe.

 #linkList2 ul > li:last-child 

Here, you're looking not only at a child selector in play, but also at a CSS3 pseudo-class, :last-child. While :first-child provided Eric with the ability to select only the first child links within his menus, this pseudo-class allowed him to select the last child within his list and apply a different style to it. As it happens, some browsers already support rudimentary CSS3, so he was able to use it to create satisfactory results.

Tip

To learn more about Dean Edwards's work on Internet Explorer 7, see http://dean.edwards.name/IE7/. The whatever:hover technique is discussed at www.xs4all.nl/~peterned/csshover.html.

But CSS3 isn't a complete recommendation as of this writing, and you've already seen how poorly some browsers support the current recommendations. Is there anything you can do aside from working around Internet Explorer? The answer is yes, but how desirable these options are is up to you.

First, you can always default to JavaScript for dynamic menus. There's nothing wrong with that per se, but CSS allows you to do it much more elegantly and without the added concern as to whether the visitor has JavaScript enabled, and also has a CSS-compliant browser.

The other alternative is to use what is known as an .htc file. This extension is proprietary to Internet Explorer. Using scripting within the .htc file can alter the behavior of the browser itself. The most widely known workaround using this technique is developer Dean Edwards's IE7 project, which is a series of .htc files that correct some of Internet Explorer's buggy behavior and add support for advanced CSS. Another option, where :hover is concerned, is the "whatever: hover" technique, based on the same principles.

It's very important to bear in mind that these are unsupported workarounds, and should be used with caution and forethought. They are also somewhat controversial. Obviously, the support for specifications should exist in the browsers, and some purists feel that using any kind of hack or filter is inappropriate.

Lessons Learned

From the fragile tulip out of which the design evolved, to the complex means of addressing menus in CSS (which are theoretically very simple to create as long as the target browsers support the specifications), to the often confusing subtleties found in workarounds and filters, Tulipe is a prime example of CSS being used both intelligently and responsibly. While CSS designers all yearn for the day when such workarounds are not necessary, taking advantage of progressive design and making those designs backward-compatible means learning the workarounds for now. For viewers of Tulipe, the experience is aesthetically pleasing and functional, no matter which browser is used.