How to Write HTML for a Menu
- 1). Type your menu items out each on their own line. Wrap anchor tags around each menu item and then set the "href" attribute to the URL where that menu item should point.
<a href="/links/?u=firstpage.html">First Page</a>
<a href="/links/?u=secondpage.html">Second Page</a> - 2). Wrap each menu item in list item tags. The list item tags should go outside the anchor tags, thereby making each link an item in a list. Here is the result:
<li><a href="/links/?u=firstpage.html">First Page</a></li> - 3). Place an opening unordered list tag on a new line above the first menu item. Add a closing unordered list tag on a new line after the last menu item. Give the unordered list an ID attribute and set its value to a unique, meaningful name like "menu" or "topmenu." Here is an example:
<ul>
<li><a href="/links/?u=firstpage.html">First Page</a></li>
<li><a href="/links/?u=secondpage.html">Second Page</a></li>
</ul> - 4). Add a submenu by adding a new unordered list containing list items wrapped in anchor tags between a set of <li> tags. The new unordered list must go after the closing anchor tag. The code will look like this:
<ul>
<li><a href="/links/?u=firstpage.html">First Page</a>
<ul>
<li><a href="/links/?u=submenupage.html">Sub-Menu Page</a></li>
</ul>
</li>
<li><a href="/links/?u=secondpage.html">Second Page</a></li>
</ul> - 5). Open the external CSS file for your Website or find the <style> tags towards the top of your HTML code. Add CSS code to the CSS file or between the <style> tags to style the menu. Use CSS code first to remove bullets and indentation. Here is the code:
ul {list-style: none; margin-left: 0; padding-left: 0;} - 6). Start styling your menu by making all list item tags float to the left of each other. You can then add padding to the anchor tags, but you must also add "display: block" to make the padding work. The padding makes the links easier to click. Here is some example code:
li {float: left;}
li a {padding: 10px; display: block;}
After you do this much, you can then add backgrounds, rollovers and even pure-CSS dropdowns to make a great menu for your Web page.
Source...