Posted By Doteasy

Navigation bars or menus present a list of choice to the visitor. For example,

  • Home
  • Services
  • Products
  • Support
  • About
  • Contact

Often these choices will have nested options. For example, under About, you might find:

  • Company History
  • Staff
  • Press Releases

Menus as Lists

We’ll start by marking up the first list shown above as HTML and giving the list an id of “mainmenu”.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>

With no CSS, this menu will display as follows:


Over the next few weeks, we will show you how to turn the list into a stylish navigation menu:

  • horizontal menu
  • vertical menu
  • drop-down menu
  • pop-out menu



*CSS is supported on all Doteasy web hosting plan, including $0 Hosting. All you need is a simple text editor, ie. Notepad.

For more information on the basics of CSS, is a good place to start.

1 Comment(s):
apix said...
it's so nice..To create web free
May 23, 2009 10:12:44


Recent Entries
Latest Comments
Free Tools and Applications
Doteasy Knowledge Base
Doteasy Reviews

You have 2159137 hits.

$0 Web Hosting

$0 Web Hosting

Add to Technorati Favorites

Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner