advice on creating a menu with xhtml & css

I have a designed menu that someone designed for me (image file attached).
I'm trying to learn about writing proper xhtml & css, and was wondering how can I want create that menu with good xhtml & css writing. how do you suggest I create it? I looked at many websites source code and noticed they do their menus with the lists tags.
also, this menu will change it's background image when the mouse goes over it. so I was wondering - what is the best way to build it?

Thanks

 

List, and CSS mouseover. Pretty much like I have them in my portfolio except stacked vertically.

View source of this page: http://www.rihardsonline.com/ to see how I did it, and how I would do it.

 

As crazybjörn said, a list is the best way to go about this.

You're going to want to mark it up like this:

<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>

Code (markup):

Then in your stylesheet, use this code:

* {    /* this is a universal selector at work; it will strip the margin and padding from EVERYTHING; you will have to explicitly declare what tags you want to have margins and padding applied to if you use this; if you don't want to use this, then go to the code below and manually add the 0 margin and padding */
    margin: 0;
    padding: 0;
}

#menu {
    border-top: 0.325em solid #FFF; /* if you're comfortable with pixels, use them instead, but change everything else in this example stylesheet to pixels as well */
    border-bottom: 0.325em solid #FFF;
    list-style: none;
    width: 7em; /* or whatever width you want */
}

#menu li {
    display: inline;  /* I've noticed older versions of IE can choke without this */
}

#menu a {
    background: #F00 url('images/background.jpg') top right no-repeat; /* replace my example background color and image with your own */
    border-left: 0.325em solid #FFF;
    border-right: 0.325em solid #FFF;
    color: #FFF; /* replace my example link text color with your own */
    display: block;
    height: 75px; /* equal to the height of the background image */
    text-decoration: none;
    text-indent: 0.5em;
    width: 100%;
}

#menu a:hover {
    background: #FF0; /* change example background color to your own */
    color: #000;  /* change example link color to your own */
}

Code (markup):

 

Or in his case if he saves both menu states in a single image then he would shift the background with background-position in the :hover bit.

 

I'd still go with declaring a background color as a fallback for those who get the CSS but not the images rendered in their browesr/user agent of choice though .

 

The thing with those is that, if your browser doesn't support images, the chances are it doesn't support CSS either. For example lynx.

 

Don't forget that a lot of dialup users still turn off images to help reduce their page download times. They won't see the images, but they'll still get the stylesheet.

 

that sounds interesting. how do you do that?

 

If you have a few minutes, study the code at Paul O'Brien's Web site and see how he does it in this example:
http://www.pmob.co.uk/temp/navimagereplace.htm

 

this is what I did:

<ul id="listMenu">
	<li><a href="#">LINK NAME</a></li>
</ul>

Code (markup):

#listMenu
{
	list-style: none;
	width: 182px;
	margin: 0;
	padding: 0;
	padding-top: 1px;
}

#listMenu li
{
	display: inline;
}

#listMenu a
{
	background-image: url('images/menu-out.jpg');
	background-repeat: no-repeat;
	width: 182px;
	height: 31px;
	display: block;
	text-align: right;
	direction: rtl;	
}

#listMenu a:hover
{
	background-image: url('images/menu-over.jpg');
}

Code (markup):

what happens now is that LINK NAME is in the upper right corner. I want to position in in a specific place inside the block. but when I put padding-right (with some px value) or margin-right (with some px value) it pushes the entire block (including the image) and not only the text.
how can I position the text now?

 

I started with this CSS tutorial http://www.alistapart.com/articles/dropdowns

 

Ah, ALA. A repository of old, obsolete and bloated code that doesn't even adhere to industry standards. What fun.

 

so how can I position the text inside the code I've just posted?