[Twenty Twelve] How to change background color of navigation?

Could you link your site?

Oops, forgot the links! My site is here. The site whose menu I want mine to look like is here. Thank you.

You also have a problem with the Contact Us submenu being partially hidden by the slider in the main content area. To fix that, add this:

#site-navigation li ul {
   z-index: 100;
}

100 is a bit overkill, but you really don’t want anything to potentially cover up your submenu items.

Anyway, to get a black background for your menu bar:

#site-navigation,
#site-navigation .sub-menu,
#site-navigation .sub-menu a {
   background-color: black;
}

The first selector is for the main menu, the second selector is for your submenu, and the third selector is for the link in the submenu, since the submenu backgrounds should also be black.

Now, stretch the menu bar across the width of the page:

#site-navigation {
   width: 100%;
   padding: 15px 0px;
}

The value of 100% for the width property extends the menu bar all the way across.
The values for padding adds a bit of padding to the top & bottom of the menu bar, to increase the height, so it won’t look so thin.

I think it would look a bit better to move the menu items to the right a little bit so the Home menu item won’t be so close to the left edge:

#menu-item-68 {
   margin-left: 20px;
}

You’ll probably want to change the menu text to increase the contrast:

#site-navigation li a,
#site-navigation .sub-menu li a {
   color: #fff;
}

The first selector is for the main menu items, the second selector is for your submenu items. #fff is white, change to whatever color you’d like.

This is the selector for the current menu item (i.e., Home should be a different color than the rest of the menu items when you’re on the Home page), so you may want to change this as well:

#site-navigation .current_page_item > a {
   color: #f00;
}

I used red, like the example site that you gave, but you can change it to whatever color you want, of course.

You’ll want to change the hover color of the menu text, since it is currently black and would blend in with the black menu bar.

#site-navigation li a:hover,
#site-navigation .sub-menu li a: hover {
   color: #f00;
}

Again, the value is red, as in the example site you provided. The first selector is for the main menu items, the second for the submenu items.

The only thing left to tweak is the submenu item. It’s a bit high since we added 15px of padding to the menu bar, so add a margin of 15px to the top of the submenu item:

#site-menu .sub-menu li {
   margin-top: 15px;
}

Wow, thank you for such a thorough answer! You’ve saved me hours of tweaking to get the menu to look just right. Now I know how to do this for some of my other sites too.

Ugh, I just noticed a mistake.

Change this:

#site-navigation .current_page_item > a {
   color: #f00;
}

To this:

#site-navigation .current-menu-item > a {
   color: #f00;
}

Got it! Thank you again.