Dreamweaver Design Website CSS Navigation Menu

Dreamweaver CSS Menu

When designing a website some designers will use Flash elements for their navigation menu, 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 page 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 that 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

#navigation
{
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

See The DEMO