I almost have this site the way I want it. I just can't get the colors right on the menu a the top.

http://jmbuilders.smugmug.com/

This is my css:


[FONT=Courier New]div.navholder
{
padding: 0;
margin: 0;
font-weight:bold;
margin-left:auto;
margin-right:auto;
width: 998px;
}[/FONT]
[FONT=Courier New]#navcontainer ul {
width:998px;
margin: 0;
padding: 10px 0;
list-style-type: none;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size:12px;
}[/FONT]

[FONT=Courier New]#navcontainer {display: block;}[/FONT]
[FONT=Courier New]#navcontainer ul li {
display: inline;
}[/FONT]
[FONT=Courier New]#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #e6eaf3;

}[/FONT]
[FONT=Courier New]#navcontainer ul li a:visited {
text-decoration: none;
padding: .2em 1em;
color: #e6eaf3;

}[/FONT]
[FONT=Courier New]#navcontainer ul li a:hover {
color: #463682;
background-color: #fff;

}[/FONT]

And this is my custom header:

[FONT=Courier New]<div class="navholder">[/FONT]
[FONT=Courier New]<div id="navcontainer">
<ul>
Test
<a href="[/FONT][FONT=Courier New]; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Services</a>&nbsp; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Services</a>&nbsp; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Construction</a>&nbsp; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Galleries</a>&nbsp; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Us</a>&nbsp; |&nbsp;&nbsp;
<a href="[/FONT][FONT=Courier New] Us</a>
</ul>
</div>[/FONT]
[FONT=Courier New][/FONT]
I just can't see what I have wrong. I think I've spent more time on this than the rest of the site!

Thanks for any advice

You do not need to post your CSS here as it just makes the thread hard to read. We can see anything we want to right in your web page. Your CSS is targetting:

#navcontainer ul li a

with this rule:

#navcontainer ul li a {
    text-decoration: none;
    padding: .2em 1em;
    color: #e6eaf3;
}

But your HTML doesn't have any li tags. You should either put each menu item in an li tag or change the CSS to this:

#navcontainer ul a {
    text-decoration: none;
    padding: .2em 1em;
    color: #e6eaf3;
}

I presume you want the <li> tags as in the navbar example here.

DOH! I knew it was something stupid I was doing...but I guess I wasn't looking for anything so obvious as that. I had copied the menu from the website code, not realizing the difference in the structure.

THANKS FOR YOUR HELP!