❮ Back to home page

❀ Summary 6 ❀


Vertical Menus


You use lists to create vertical menus. To use this, you use the code li to create and un-numbered list. Using this code allows us to add a top border to all the list elements except the first one, creating a divider between the list items. This is helpful for organization and overall appearances.


Horizontal Menus


By default, list items stack vertically, but can easily be changed to side-by-side with a little code. To do this you must code a nav set up. This is done by creating a nave class div for your list. The CSS set up for a nav list is similar to the CSS used for the vertical list setup. For appearances and organization purposes, it is nice to add a divider between the horizontal list items, similar to the vertical lists.


Drop-Down Menus


A drop-down menu is based on a set up nested lists, which combines the vertical and horizontal menus. You will also need to use the nav element and the code multi_drop_menu in order to properly create a drop-down menu. You can create sub menus by nesting lists. You will start by creating a horizontal list then nesting vertical lists into it in the HTML. Doing it this way will not require any changes to the CSS.