List Menu construction steps

Creating a menu is easy when you follow the steps properly.

• Create an HTML list for your menu
• Style the list (ul) to remove bullets and indents
• Style the list items (li) to arrange themselves horizontally or vertically
• Style the links (a) to display as blocks and give the links the look you want
• Style the rollover link (a:hover) as you see fit

If you want a dropdown menu, you need the add the following:

• Add a list inside one of your existing list menu items
• Style the list in a list (ul li ul) to be invisible
• Style the list in a list rollover (ul li:hover ul) to be visible
• Menu Code
Below is the code for a simple HMTL menu list with a sublist (dropdown menu)<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3
<ul>
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3</li>
</ul>
</li>
<li>MENU4</li>
<li>MENU5</li>
</ul>Go over the tutorials and then complete the top green BCC menu with the dropdown menus.

REMEMBER:

• Create your menu using lists <ul> <li> and styling those tags.
• Sub menus should be set to Position: absolute.
• Use placement to position the sub menu where you need it
• The sub menus box is the <ul> tag while the links are the <li> tags
Ben-Nun Drop Down Menu
Tagged on: