• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

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


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint