Duration: 16 minutes
Summary: In this video, we will learn how to create a menu from what we have learned so far. We will start by creating an unordered list of items that mimic some of the browser menu elements. As we all know the unordered list will display by default as a bulleted list with every item on a separate line. But using CSS we will try to change this and end up with the menu we desire. To start we can change the list style type to ‘none ‘ to remove the bullets from the list. Also we can change the display property for the list item to ‘inline’ to have all the list items on one line. Using the a:hover we can change the background color as the user hovers over the item. We complete our menu design by changing some additional properties like float, margin, padding, and border-right.
Methodology: Using simple examples to illustrate the key points.
Technology Used: CSS, HTML and Visual Studio 2010
Keyword: CSS, HTML, Visual Studio 2010, background-color, width, float, padding, margin, display, list-style-type, text-decoration, border-right, a:hover.