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>::
<ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> <li>Menu Item 4</li> </ul>
- Menu Item 1
- Menu Item 2
- Menu Item 3
- Menu Item 4
Now add some links to the the list:
<ul> <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> </ul>
Result:
Let's remove the bullets. We need to define a style-sheet to do that:
li.menu {
list-style-type: none;
}
list-style-type: none means we do not want the bullet to appear on list items where class=menu:
<ul> <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> </ul>
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):
a.menu{
background-color:#6699CC
}
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):
<ul> <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> </ul>