menu source code

Step-7: At last, put hover effects (or) rollover effects, by mentioning separate back ground color & font color – this change the colors automatically
COMPLETE CODE FOR MENU-HORIZONTAL. (you use this code for your web site with / without modification)
<html> <head> <style type="text/css"> ul#menu{ list style-type: none; margin: 0px; padding: 0px; width:500px; } ul#menu li { display: inline; } ul#list-nav li a { padding: 5px 20px; background-color:#CCC; text-decoration: none; border-left: 1px solid #fff; } ul#menu li a:hover { background-color:#333; color: #FFF; } </style> </head> <body> <ul id ="menu"> <li> <a href="#" > HOME </a> </li> <li> <a href="#" > ABOUT </a> </li> <li> <a href="#" > CONTACT </a> </li> <li> <a href="#" > DETAILS </a> </li> </ul> </body> </html>
With this, the out put of complete menu will be:


page: 4 of 4        back  

No comments:

Click Here To add Comment

Post a Comment