A Smarter Way To Learn HTML & CSS(2015)

72
A vertical navigation bar

part 4

We’re still working on the vertical navigation bar.

I want the color block to expand horizontally. We could do this by adding left and right padding to the ul, but because of something we’re going to do in the next chapter, I’ll add the padding to the li elements instead.

div#navbar ul li {
padding: 0 1em 0 1em;
}

Now we’ll add a little padding below each list item to separate them.

div#navbar ul li {
padding: 0 1em .3em 1em;
}

The result:

In your CSS file, add some padding on the left and right of list items. Add a little padding to the bottom of each list item to separate them. Save the file. Display the page.

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-72-1.html. Find the interactive coding exercises for this chapter at: http://www.ASmarterWayToLearn.com/htmlcss/72.html