Creating Tabbed Menu
This tutorial are tested with Internet Explorer 7 and Firefox 2 on the PC.

Using list <ul> elements to create menu is a fairly common technique and this tutorial will give you a basic introduction of the technique. This tutorial assumes familiarity with using Cascading Style Sheet (css) and familiarity with html.

To begin with, create a list of links using unordered list <ul>::

  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>
  <li>Menu Item 4</li>
The result is like this:
  • Menu Item 1
  • Menu Item 2
  • Menu Item 3
  • Menu Item 4

Now add some links to the the list:

  <li><a href="page1.html">Menu Item 1</a></li>
  <li><a href="page2.html">Menu Item 2</a></li>
  <li><a href="page3.html">Menu Item 3</a></li>
  <li><a href="page4.html">Menu Item 4</a></li>


Let's remove the bullets. We need to define a style-sheet to do that: {
list-style-type: none;

list-style-type: none means we do not want the bullet to appear on list items where class=menu:

  <li class="menu"><a href="page1.html">Menu Item 1</a></li>
  <li class="menu"><a href="page2.html">Menu Item 2</a></li>
  <li class="menu"><a href="page3.html">Menu Item 3</a></li>
  <li class="menu"><a href="page4.html">Menu Item 4</a></li>
The result:

To add highlight to the links, set the background-color property of the <a> element (we can also do this for the <li> element instead, but it is preferable to do it for the <a> element because <a> element has widespread support for mouse hovering):{

The above style tells the browser to use blue (#6699cc) as the background of <a> elements of class menu. So all <a>s where class=menu will have this blue background. To use it, set our <a> to use this class (class=menu):

  <li class="menu"><a class="menu" href="page1.html">Menu Item 1</a></li>
  <li class="menu"><a class="menu" href="page2.html">Menu Item 2</a></li>
  <li class="menu"><a class="menu" href="page3.html">Menu Item 3</a></li>
  <li class="menu"><a class="menu" href="page4.html">Menu Item 4</a></li>
The result:

Download the .css