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.


  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.


  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.)


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

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: