How to implement an external stylesheet for my menu?

I want to create a nice horizontal menu, I've created the stylesheet for it, but how do I implement that? Is there html I need to add to a file to specify where I want the menu to show and link it to the external stylesheet?

If you want the menu in the header, just add the code to the header.php and add the css to the end of stylesheet.css. Make sure you don't have conflicting IDs in the css

Are none of the horizontal dropdown menu mods in Free Addons suitable? It would probably be easier to use or adapt one of those than to start from scratch building a new menu.

You can add the styling rules directly to /includes/templates/your_template/css/stylesheet.css, rather than making a new CSS file.

Thank you I'll try out one of the mods.

Ok I tried a few things but it just wasn't giving me what I wanted.

I've created a menu based on the tutuorial here: http://www.webdesignerwall.com/tutorials/advanced-css-menu/

and have all the info entered in the stylesheet.css

What I'm not understanding though, is what file to put this code in, and where in the file to put it?:

<ul id="menu">
  <li><a href="#" class="home">Home <span></span></a></li>
  <li><a href="#" class="about">About <span></span></a></li>
  <li><a href="#" class="contact">contact <span></span></a></li>
</ul>

Also when I enter all my menu info in the stylesheet.css
(i.e. #menu, #menu span, etc) do I put it just under this part
in the code if I want my menu to show just under the
logo wrapper?:

#logoWrapper {
background-color:#1F0D00;
background-image:url(../images/ngheader_bg.gif);
border: none;
height:400px;
}

The location of the rules in the stylesheet will not affect the position of the output on the screen. The one relevant aspect is that specific rules that apply to only one of a set of elements should go after general rules that apply to the whole set of elements.

If you want your menu to appear in the header, you would put your HTML/PHP code in /includes/templates/your_template/common/tpl_header.php.

Thank you so much for taking the time to help. I am however still running into one problem. I don't know if it's my positioning or what, but only the Home button is showing and not the others (and it's linking to the 'Our Scents' page instead of the page it's supposed to).

The site is https://www.zingslings.com/awe and it's all in the stylesheet.css

This is the info I have in my tpl_header.php file:

<ul id="menu">
  <li><a href="/awe/index.php?main_page=index&cPath=5" class="scents">Our Scents <span></span></a></li>
  <li><a href="/awe/index.php?main_page=index&cPath=4"" class="baby">Baby <span></span></a></li>
  <li><a href="/awe/index.php?main_page=product_info&cPath=1&products_id=1" class="bath">Bath <span></span></a></li>
  <li><a href="/awe/index.php?main_page=index&cPath=2" class="body">Body <span></span></a></li>
  <li><a href="/awe/index.php?main_page=index&cPath=3" class="home">Home <span></span></a></li>
</ul>

If anyone can tell me where I went wrong it would be greatly appreciated. It took me 2 hours tonight just to get to this point.

<li><a href="/awe/index.php?main_page=index&cPath=4"" class="baby">

You have an extra " after the 4.

<li><a href="/awe/index.php?main_page=index&cPath=4" class="baby">

Thank you all so much for the help :) I have it working beautifully now thanks to this forum.