SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Navigation Bar in HTML

Navigation Bar in HTML

Ghostbone.com Tutorials Dec 07, 2005

Now we're gonna create a navigation bar in html. Copy the following code into the HEAD of your script.

navigation bar in html


<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