Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Horizontal Navigation Bar
rss
Your Ad Here

Horizontal Navigation Bar

Author: Ghostbone.com More by this author
Added: Dec 07, 2005 Rating:   Level: Experienced Software: Dreamweaver  

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>


Author's URL: Ghostbone.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Horizontal Navigation Bar"

Only registered users can write comment

Reader's comments