SEARCH
 
Join our free newsletter for useful tips and valuable resources in web design industry.
It doesn't look like an e-mail address
  Tutorials HTML and CSS Tutorials Horizontal Navigation Bar

Horizontal Navigation Bar

Ghostbone.com Tutorials Dec 07, 2005

Copy the following code into the HEAD of your script.

Horizontal Navigation Bar


<style type="text/css">

.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>


Copy the following code into the BODY of your script.

<div class="hovermenu">
<ul>
<li><a href="http://www.templatemonster.com">title 1</a></li>
<li><a href="http://www.templatemonster.com">title 2</a></li>
<li><a href="http://www.templatemonster.com">title 3</a></li>
<li><a href="http://www.templatemonster.com">title 4</a></li>
<li><a href="http://www.templatemonster.com">title 5</a></li>
</ul>
</div>

   
subscribe to newsletter