6.1 Navigation Menus

In the section on links in HTML we touched upon navigation menus. As these are simply lists of links, the HTML list should always be used for these. For example:

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

Obviously this won't look too exciting in a webpage, but with CSS we can add some styling using list and anchor tags as selectors:

ul		{
		width:180px;
		}

li		{
		list-style:none;
		display:block;
		border-bottom: 1px dotted #6699cd;
		}

a		{
		display: block;
		color: #000066;
		margin:2px 0 2px 0;
		}

a:hover		{
		color: #990000;
		background-color:#ccddff;
		}

The first line of code was added to remove list bullets. Then we added a fixed width to the list of 180px, and then a little styling to the <li> and <a> tags. Then we added some styling to the anchor pseudo class hover. This would give a navigational menu like this (try hovering over it):

   

By default a list will list items vertically, but to make it list items horizontally we could add the following to the stylesheet:

li	{display: inline;}

This would look like this:

However, for this to work we would need to remove the display:block from the anchor tag. But if we wished to keep this to maintain even lengths for each list item, replace display:inline in the list item with float:left.