Vertical Navigation - Modifying the Code


Click on the movie reel icon to view a video demonstration. You may need to watch the video a few times to totally understand the concepts. Feel free to print out the notes and copy the code from the files which are linked at the bottom of the page.

Now lets add some code that causes the main navigation and pop out navigation to change color when I hover. To do that I add a multiple, contextual selector which includes a pseudo class. Try saying that 5 times really fast :->

new CSS code

/* Hover Styles */
ul li a:hover, li ul li a { color: #fff; background: #8ea867; }

This code addresses 2 types of a tags:

1. links which are within a list item within an unordered list (an outer list link). The color change of text and background will only occur when I hover.

2. links that are within a list item that is part of an unordered list that is within another list item (an inner list link). The color change will occur at all times, not just when I hover.

Here is how the page looks with a hover effect

I like the way the hover effect now has a unifying color that ties the main menu item with the sub menu but I don't like the fact that the border has now disappeared so there is no definition between items in the inner menu.

I return to the code and add a style for the inner list.

/* Sub Menu Styles */
li ul li a { padding: 3px; border-bottom: 1px solid #abc287; font-size:.75em; }

This code sets the padding at 3 pixels instead of the 5 pixels set earlier in the CSS, adds a 1 pixel solid light green border at the bottom of each link, and reduces the font size.

Here is the final version of a vertical navigation bar with pop out menus.