Submit Tutorial

spacer
Newsletter

spacer
RSS
spacer
Submit Tutorial

spacer
CSS Navigation Bar
by Nathanael Mitchell
Creating a Navigation Bar with CSS
by Janine Warner
Navigation Boxes
by Imusion
Tabbed Navigation
by Ghost
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
UK Hosting Services
Provider of low cost affordable UK web hosting services.
HTML and CSS  Home HTML and CSS Tutorials Horizontal Navigation Bar
rss

Horizontal Navigation Bar

Author: Ghostbone.com More by this author

Added: Dec 07, 2005 Rating:  Average Rating: 3.16 Votes: 31 Position: 6595 of 13009Average Rating: 3.16 Votes: 31 Position: 6595 of 13009Average Rating: 3.16 Votes: 31 Position: 6595 of 13009Average Rating: 3.16 Votes: 31 Position: 6595 of 13009Average Rating: 3.16 Votes: 31 Position: 6595 of 13009 Level: Experienced Software:  DreamweaverGoLiveFrontPage

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>


Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Horizontal Navigation Bar"