Enhancing Pull-down Menus

Maybe you’ve looked at the previous example, and now you’re saying, “I don’t want a vertical menu; I want a horizontal menu!” That’s straightforward (and doesn’t even require any changes to the JavaScript!). Or maybe you want it to be a little more compatible for people who navigate using the keyboard? Here’s how to do it. Once again, there’s no change to the HTML, so you can refer back to Script 15.1 if you need to see it.

To enhance pull-down menus:

1. 
float: left;
Here’s the sneaky trick: just add float: left; to the CSS for each menu div, as shown in Script 15.6 and Figure 15.5. Yes, that’s all it takes to turn a vertical menu into one that’s horizontal—no JavaScript required.
Figure 15.5. A simple change to the ...

Get JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial