CSS NAVIGATION BAR

If we want to create a horizontal menu like this

navigation bar

First create a list of menu items

<div class="menu"> <ul> <li><a href="html.htm">HTML</a></li> <li><a href="css.htm">CSS</a></li> <li><a href="php.htm">PHP</a></li> </ul> </div>

Now create the necessary CSS styles:

<style type="text/css"> div.menu { width:100%; height:80px; } div.menu ul { list-style-type:none; margin:0; padding:0; } div.menu li { float:left; } div.menu a { display:block; width:50px; } div.menu a:link,div.menu a:visited { font-weight:bold; color:#FFFFFF; background-color:#98bf21; text-align:center; padding:3px; text-decoration:none; } div.menu a:hover,div.menu a:active { background-color:#7A991A; } </style>