Branching Out


Now that you know how to create drop-down menus using CSS, try sprucing them up in the following ways:

  1. Take the style sheet from the first half of the project and expand it so that the entries have a gray stripe along their left edges, and do so without using a background image. The stripe should change to red for the menu entry currently being hovered. While you're at it, make the background of each level of submenu slightly darker.

    graphics/06inf01.jpg

  2. Extend the styles from the second half of the project so that gray borders separate the top-level links. Here's the challenge: Do it without changing the visual appearance of the submenus in any way.

    graphics/06inf02.jpg

  3. Rework the styles from the second half of the project to make sub-submenus pop out to the left of their triggering menu entry instead of to the right. To look as good as possible, right-align the text in the submenus, but make sure it does run up against the right edge of the submenus. Also, you'll need a new arrow graphic. (Try flipping submenu.gif horizontally in a graphic editor like Photoshop.)

    graphics/06inf03.jpg



More Eric Meyer on CSS
More Eric Meyer on CSS (Voices That Matter)
ISBN: 0735714258
EAN: 2147483647
Year: 2006
Pages: 109
Authors: Eric Meyer

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net