To this point I have used the purely functional green border around the sidebar DIV so I could see its width and height. I think a different color and type of border would look better.
I want to make a drop-shadow effect around the navigation menu. I will do this by increasing the width of the border on the right side and bottom of the sidebar DIV. In addition, I will change the color of the border from green to something that more closely matches the color of the link text.
- If you would like to follow suit, alter the border property for the sidebar DIV as follows:
div#sidebar {
position: absolute;
top: 46px;
left: 36px;
width: 6em;
border: 1px solid green;
border-left: 1px solid black;
border-top: 1px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
My menu now looks like this. Adjust to taste!
This completes the introduction to vertical navigation menus based on lists. The next section of the lecture introduces you to building horizontal navigation menus using lists.