Stylizing Horizontal Navigation Bar - html

Question

I'm creating a horizontal navigation bar and would like to stylize it so that a thin line will appear right above the bar (please see example).
Nav Bar Example
As you can see there is a thin, gold line just above the red navigation bar. I would like to get a thin, black line just above my orange navigation bar.
My code looks like this:
(CSS)
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
nav li {display:inline-block;background-color:#c0872e;}
nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
nav a:hover {text-decoration:none}
(HTML)
<div>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</div>
Please let me know how I can achieve this desired effect. Thank you!

Answer 1

You could accomplish this using a border:
nav ul {
border-top: 2px solid #000; /* Added */
list-style-type:none;
margin:0;
padding:0;
text-align:center;
background-color:#c0872e
}
Here's a JSFiddle to show you how it looks.
Hope this helps! Let me know if you have any questions.

Answer 2

Just do this (add border-top)
CSS
nav ul {
list-style-type:none;
margin:0;padding:0;
text-align:center;
background-color:#c0872e;
border-top: solid 1px #000; // Add this (adjust your needs)
}

Answer 3

First, we need to change your surrounding div to the nav element.
<nav>
<ul>
<li>Home</li>
<li>Products</li>
</ul>
</nav>
Then just add a border-top to the nav css.
nav {width:100%;display:block;border-top:4px solid #000;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;background-color:#c0872e}
nav li {display:inline-block;background-color:#c0872e;}
nav a {line-height:35px; color:white; padding:0 30px; font-size:22px; font-family:WindsorDemi.fog Cn; background-color:#c0872e;}
nav a:hover {text-decoration:none}