Topic 1: Navigation Menus
A navigation menu makes it easier for users to find important links. To do a menu, use HTML lists because it makes the links still display correctly if they have no CSS style. Lists do stack vertically, but it can be changed. Now, the links only work when hovering over the link text so it’s important to change that for the user’s experience. The best way to do this is by adding top borders and padding to the links themselves.
Topic 2: Drop Down Menu
You can stylize a navigation menu even further with a drop-down menu. The best way to start out is by adding every level you want in the drop-down menu into their own nested lists in the HTML. So, if you have three levels, make three nested lists. When you go to style, it is important to not use overflow:hidden to enclose your floated top level of the menu, or else the rest of the levels will not show up. However, it’s important to put display:none on the first level about its children to hide these lower levels.
Topic 3: Pop up Overlay
A pop up overlay is useful to show names for elements on your site when hovered over them. This is ideally used for pictures on your site. It also is an effective way to display more information to the user when you have limited space. The way a pop up is done is by using the z-index property.