Branching Out

With the elements we have available, there are almost too many choices for ways to style our menu. Here are a few ideas to get you thinking:

1. Change the hover effect from the first half of the project so that it encloses the whole link in a border but without causing any offset to the left when hovering. The background image should also move to the right side of the link. While you're at it, tie the sidebar heading and the main entry heading together visually by using negative margins and add in some padding to get the sidebar title's text to right-align with the double border on the right side of the sidebar.

   

2. Rewrite the menu styles from the second half of the project so that the links appear to be written on the background but are surrounded by a dark shade similar to that used in the masthead. Thus, the links should have a background that matches the body and should be "connected" to it with lines of color that match both links and body.

   

3. Take the styles from the second half of the project and combine them with principles from the first half of the project to create a hybrid style. For example, have an inverted "L" border that runs along the top and right sides of the menu and make each link sit to the left of a rotated "T" shape that extends from the "L" and ends just to the right of each link's text.