CSS interactive navigation menu...

For the DHTML Designing, we can achieve more effects with CSS. They have provided amazing functionality with designing objects in the Web site and it is getting rich and professional looking.

Here are the example coding of HTML.

The style sheet is looking like this.

ul.navigation
{
list-style:none; /* this line will remove any kind of bullet from the menu */
width: 160px; /* sets the menu width */
margin:0;
padding:0;
}

#menu a
{
display: block; /* this is a very important property here and it controls the way the menu elements are displayed - like block-level elements */
padding: 5px 3px 5px 10px; /* sets the padding properties */
font-weight:bold; /* sets the font weight */
background-color: #833331; /* sets the color of the background */
border-top: 1px solid #efefef; /* this code sets the line between the menu items */
}

#menu a:link
{
color: #efefef; /* sets the font color */
text-decoration: none;
}

#menu a:visited
{
color: #efefef;
text-decoration: none;
}

#menu a:hover
{
background:#100008 url(menu-arrow.gif) no-repeat left center; /* when the cursor is over, in the left side of the menu item background it will be display the arrow.gif picture */
text-decoration: underline;
text-indent:15px; /* this line of code move the text 15 px to the right */
}

#menu a:active
{
color: #efefef;
text-decoration: none;
}