Design a Website Navigation Menu

CSS Menu
When creating a website some designers will use Flash elements for their navigation area, firstly it's aesthetically pleasing and looks impressive to any new visitor to your website, but in reality the search engines cannot "as yet" read Flash files so struggle to index your website in their rankings.

Flash is used to create a personal website like to display your own portfolio/diary to your friends and close ones, but for a business who is attempting to reach a worldwide audience a Flash navigation is a no go area for the aforementioned reason.

Search engines require clarification on your websites content and what information your site offers, this is vital for the engine to index your pages, by having a CSS menu the search engine will obtain the information required by reading the links in the HTML.

With CSS menus we can create a navigation menu that is just as appealing and easy on the eye, the benefits of this are the CSS menu will be made up of CSS to style the menu and HTML for the links.

HTML is one of the oldest and most trusted methods of mark-up language on the internet and what most search engines were initially set up to read, not to mention over 90 % of websites have HTML coding in their source code.

The result is the CSS menu allows you the best of both worlds, you have a nice appealing navigation area and your website will be indexed by all the search engines.

Below we will place the code for our CSS menu, along with the HTML for our links, a demo can be seen below.
Navigation Menu CSS

#nav
{
padding:0;
}
#nav li
{
display:inline;
}
#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #ff0000;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#ccc;
border-bottom-style:solid;
}
#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:0000FF;
border-bottom-style:solid;
margin:-1px;
}

CSS Menu Tips

CSS Menus are split into four sections.
Single Level Menus
Dropdown Menus
Dropline Menus
Flyout Menus