How to make an html/css horizontal navigation bar?

I'm trying to finish up a web site for a final project, and it says I have to make a navigation bar with css code, and then add it to my external style sheet so it applies to all other pages. How do I do this, and how can I get it on my external style sheet?|||If I were doing this for my own website, I'd use the unordered list element and style it accordingly:





The HTML:


%26lt;div id="navbar"%26gt;


聽聽%26lt;ul%26gt;


聽聽聽聽%26lt;li%26gt;%26lt;a href="link1.html"%26gt;Button 1%26lt;/a%26gt;%26lt;/li%26gt;


聽聽聽聽%26lt;li%26gt;%26lt;a href="link2.html "%26gt;Button 2%26lt;/a%26gt;%26lt;/li%26gt;


聽聽聽聽%26lt;li%26gt;%26lt;a href="link3.html "%26gt;Button 3%26lt;/a%26gt;%26lt;/li%26gt;


聽聽%26lt;/ul%26gt;


%26lt;/div%26gt;





The CSS:


div#navbar {


height: 30px;


width: 100%;


border-top: solid #000 1px;


border-bottom: solid #000 1px;


background-color: #336699;


}





div#navbar ul {


margin: 0px;


padding: 0px;


font-family: Arial, Helvetica, sans-serif;


font-size: small;


color: #FFF;


line-height: 30px;


white-space: nowrap;


}





div#navbar li {


list-style-type: none;


display: inline;


}





div#navbar li a {


text-decoration: none;


padding: 7px 10px;


color: #FFF;


}





div#navbar li a:link {


color: #FFF:


}





div#navbar li a:visited {


color: #CCC;


}





div#navbar li a:hover {


font-weight: bold;


color: #FFF;


background-color: #3366FF;


}





--


Of course, this is just an example of a horizontal menu. CSS properties may vary depending on how you want it to look...|||Just style the links like you would but you should use a hover color.


Use br tags to make it horizantal.


I'll upload an example it should be up in a few minutes at:


http://adventurebooks3.webs.com/examp.ht鈥?/a>|||nav bars are usually unordered lists now I usually put mine in either a div or, depending on the size of the site, in it's own php file to start make your menu on all your pages you want it on....


%26lt;div id=navigation%26gt; **optional** if you have other lists on your site it would be easiest to do it this way.





%26lt;ul%26gt;


%26lt;li%26gt;%26lt;a href......%26gt;%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href......%26gt;%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href......%26gt;%26lt;/a%26gt;%26lt;/li%26gt;


%26lt;li%26gt;%26lt;a href......%26gt;%26lt;/a%26gt;%26lt;/li%26gt;


etc....


%26lt;/ul%26gt;


%26lt;/div%26gt;





k that's all the html you'll need for the css there are several factors to look at when styling your menu.





#navigation{}


#navigation li the list items themselves


#navigation a the anchors themselves


#navigation a:active the active anchor


#navigation a:visited the visited anchors


#navigation a:hover changes if you want anything on a mouseover


and there are a few other pseudo classes for that but these are the ones I usually use. to make the list horizontal it's just a simple float:left; in either the li or the a toy around with padding commands and other things to really understand how the styling works it took me a little while to figure it all out but it's not to bad once you do. good luck!