Custom Horizontal Nav Bar for WordPress?

I’m building my first custom WordPress theme, following Chris Coyier’s (he’s great) tutorial on Lynda . The tutorial uses a sidebar for a nav bar, but I’d like to create a horizontal nav bar. I’ve always done this in Dreamweaver (or Fireworks) with CSS, using images as the tabs, but Dreamweaver uses some sort of swap image code:

My worry is that WordPress won’t accept that sort of code used for Nav bar in Dreamweaver?

The tutorial uses a list order approach, html styled with CSS.

I’m guessing I should use the list order approach? But then how do I get the nav bar to be horizontal, and not vertical?

In Dreamweaver, I’d create a nav bar space with CSS, then float the images/tabs into that space, next to one another.

List order uses text, not images. Not sure how to approach. Anyone familiar?

Thanks to both of you for responding. Chris: yep, I looked at a sample on the w3schools site, and it looks a lot like what you just showed me. I’d love to show you the design, but it’s not coded or online yet. Only the Photoshop version. I don’t think I can insert a jpg here?
But I can show you a past website I designed: http://www.thepinchdc.com/
The nav bar is the same that I’m trying to do with this new site: simple rollovers where the text changes. I think I figured it out though, from the w3school code sample, using a float left CSS style.

Pauli: In Dreamweaver I just imported the graphic I made in Photoshop (nav bar sliced up into each category: “home” as one graphic, “about” another graphic, etc…). But you can insert/image objects/rollover image. That gives you the option to bring in the graphic as a rollover. Dreamweaver ads some sort of image swap code, that swaps from, say, the “home” graphic, to an 2nd “home” graphic I made in Photoshop that you view when the mouse hovers over. But I don’t know if WordPress will allow that sort of thing. That’s why I’m trying to do things without Dreamweaver’s help. Just html and code, the standard way…which I suck at.

I have a design brain, and am fairly new to code, so I’m sure I’m not doing things the best way. That’s why I joined this site :)

@tigerpaw
What that site has is a background image that covers the entire right side of the screen. You can simply make a background image in photoshop and set it as the background.

When it comes to the hover effects, that is simple css.

.nav ul li a {
/* css here for how you want the text to look without being hovered */
}
.nav ul li a:hover {
/* css here for how you want the text to look when being hovered */
}

If you’re using a graphic for the hovered button, you can use the onmouseover function to change the img src to the hover img. Here a link to the w3c school for some more direction [W3C onmouseover](http://www.w3schools.com/jsref/event_onmouseover.asp “onmouseover”)
You could also change the background via CSS. I recommend taking a little time and watching this video that Chris made. It should be more than enough info to figure it out and you’ll definitely learn a bit about what you’re doing.
[Chris’s Three State Menu](http://css-tricks.com/video-screencasts/7-three-state-menu/ “three state menu”)

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.