Best method to create text-based, horizontal nav bar using CSS?

I'm trying to create a text-based, horizontal navigation bar with horizontal submenus and background images-based on a tutorial/stylesheet I found online. I cut and pasted the code from this online tutorial:

http://veerle-v2.duoh.com/blog/comments/2_level_horizontal_navigation_in_css
_with_images/

Here's a link to the sample menu inthat tutorial:

http://www.duoh.com/csstutorials/2levelmenu/styles_navigation.css

Here's the link directly to the stylesheet from the tutorial:

http://www.duoh.com/csstutorials/2levelmenu/styles_navigation.css

--->Unfortunately, something is broken in my code. The top-level of the menu shows up, but the first link (home) is cut in half and repeated with alternating hover-images on half of the word of the first link. None of the other links are hovering, nor are sub-menus showing up. BUMMER.

It supposed to look like this:
-->Top level AND sub-menus have same look/color-coding: red background;
hover has lime-green background
-->3 sub-menus should show up horizontally below the top level nav:
---->"christmas sweater FUN" submenu: is 800px wide (length of entire nav)
---->"shop" submenu is 293px wide. The right side of it should align with
the right side of the parent link "shop."
---->"about" submenu is 186px wide and should be flush with the right side
of the nav

I'm hoping there is a simple fix to this that is easy to see for someone more experienced than me! This is my last major "technical hurdle" in my site development---any help you could offer would be greatly appreciated!
Thanks so much in advance!

HERE IS THE HTML CODE ON MY PAGE:

<div id="navbar">
<ul id="navigation">

<li><a href="#">home</a></li>

<li><a href="#">sweater-izer APP</a></li>

<li><a href="#">christmas sweater FUN</a></li>

<li><a href="#">blog</a></li>

<li><a href="#">shop</a></li>

<li><a href="#">about</a></li>

</ul>
</div>

HERE IS MY ATTEMPT AT THE STYLESHEET:
Here is the code that I created based on the stylesheet in the example
above:

body {
   background-color: #ffffff;
   behavior:url("csshover.htc");
}

ul#navigation {
   list-style-type: none;
   padding: 0;
   margin: 0;
   border: 0;
   top: 0px;
   left: 0px;
   width: 800px;
   height: 43px;
   background: #ffffff url(navigation_over.gif) no-repeat;
}

a, a:link, a:visited {
   text-decoration: none;x
}

p, p a {
   color: #000000;
   font: 12px 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial,
sans-serif;
}

/*<group=level 1>*/

ul#navigation li {
   padding: 0;
   margin: 0;
   display: block;
   float: left;
   text-indent: -9999px;
}

ul#navigation li a {
   border: 0;
   display: block;
   height: 43px;
   background: url(navigation.gif) no-repeat;
}

ul#navigation li a:hover {
   border: 0;
   display: block;
   background-image: url(navigation_over.gif);
}

/*</group>*/

/*<group=level 1 ids>*/

li#home a {
   width: 87px;
 }

li#sweaterizerAPP a {
   width: 194px;
}

li#sweaterizerAPP a:link,
li#sweaterizerAPP a:visited,
li#sweaterizerAPP a:hover {
   background-position: -87px 0px;
}

li#christmassweaterfun a {
   width: 260px;
}

li#christmassweaterfun a:link,
li#christmassweaterfun a:visited,
li#christmassweaterfun a:hover {
   background-position: -281px 0px;
}


li#blog a {
   width: 80px;
}

li#blog a:link,
li#blog a:visited,
li#blog a:hover {
   background-position: -541px 0px;
}

li#shop a {
   width: 79px;
}

li#shop a:link,
li#shop a:visited,
li#shop a:hover {
   background-position: -621px 0px;
}

li#about a {
   width: 100px;
}

li#about a:link,
li#about a:visited,
li#about a:hover {
   background-position: -700px 0px;
}


/*</group>*/

/*<group=level 2>*/


#navigation li ul {
   display: block;
   visibility: hidden;
   position: absolute;
   left: 0px;
   width: 800px;
   margin: 0;
}

#navigation li:hover ul {
   visibility: visible;
   z-index: 100;
}

#navigation li#sub_fun ul {
   background: none;
   height: 43px;
   margin-left: 0px;
}

#navigation li#sub_shop ul {
   background: none;
   height: 43px;
   margin-left: 409px;
}

#navigation li#sub_about ul {
   background: none;
   height: 43px;
   margin-left: 614px;
}


* html #navigation li#sub_fun ul {
   margin-left: 0px;
}

* html #navigation li#sub_shop ul {
   margin-left: 409px;
}


* html #navigation li#sub_about ul {
   margin-left: 614px;
}




/*</group>*/

/*<group=level 2 ids>*/

ul#navigation li#fun ul li#generator a:link,
ul#navigation li#fun ul li#generator a:visited {
   width: 115px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat 0px 0px;
}

ul#navigation li#fun ul li#generator a:hover {
   width: 115px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat 0px -43px;
}

ul#navigation li#fun ul li#timeline a:link,
ul#navigation li#fun ul li#timeline a:visited {
   width: 92px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -207px 0px;
}

ul#navigation li#fun ul li#timeline a:hover {
   width: 92px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -207px -43px;
}

ul#navigation li#fun ul li#advent calendar a:link,
ul#navigation li#fun ul li#advent calendar a:visited {
   width: 172px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -379px 0px;
}

ul#navigation li#fun ul li#advent calendar a:hover {
   width: 172px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -379px -43px;
}

ul#navigation li#fun ul li#sweater dance a:link,
ul#navigation li#fun ul li#sweater dance a:visited {
   width: 160px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -539px 0px;
}

ul#navigation li#fun ul li#sweater dance a:hover {
   width: 160px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -539px -43px;
}

ul#navigation li#fun ul li#sweater-ometer a:link,
ul#navigation li#fun ul li#sweater-ometer a:visited {
   width: 167px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -706px 0px;
}

ul#navigation li#fun ul li#sweater-ometer a:hover {
   width: 167px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -706px -43px;
}

ul#navigation li#fun ul li#more... a:link,
ul#navigation li#fun ul li#more... a:visited {
   width: 94px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -800px 0px;
}

ul#navigation li#fun ul li#more... a:hover {
   width: 94px;
   height: 43px;
   background: url(navigation_sub_fun.gif) no-repeat -800px -43px;
}


ul#navigation li#shop ul li#sweaters a:link,
ul#navigation li#shop ul li#sweaters a:visited {
   width: 106px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -506px 0px;
}

ul#navigation li#shop ul li#sweaters a:hover {
   width: 106px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -506px -43px;
}

ul#navigation li#shop ul li#custom a:link,
ul#navigation li#shop ul li#custom a:visited {
   width: 98px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -612px 0px;
}

ul#navigation li#shop ul li#custom a:hover {
   width: 98px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -612px -43px;
}

ul#navigation li#shop ul li#more... a:link,
ul#navigation li#shop ul li#more... a:visited {
   width: 89px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -710px 0px;
}

ul#navigation li#shop ul li#more... a:hover {
   width: 89px;
   height: 43px;
   background: url(navigation_sub_shop.gif) no-repeat -710px -43px;
}


ul#navigation li#shop ul li#company a:link,
ul#navigation li#shop ul li#company a:visited {
   width: 100px;
   height: 43px;
   background: url(navigation_sub_about) no-repeat -607px 0px;
}

ul#navigation li#shop ul li#company a:hover {
   width: 100px;
   height: 43px;
   background: url(navigation_sub_about.gif) no-repeat -607px -43px;
}

ul#navigation li#shop ul li#Trisha a:link,
ul#navigation li#shop ul li#mTrisha a:visited {
   width: 93px;
   height: 43px;
   background: url(navigation_sub_about.gif) no-repeat -700px 0px;
}

ul#navigation li#shop ul li#Trisha a:hover {
   width: 93px;
   height: 43px;
   background: url(navigation_sub_about.gif) no-repeat -700px -43px;
}

/*</group>*/

--
Freedom is the right of all sentient beings...

@duckinator: Can you post a link to the actual page please? Or at least paste the entire page (including HTML and CSS) here so we can try it?

Thanks!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

If you are using that style sheet as an example, then you left out all the ids in the "li" tags that go with it. Look at the source code for the menu on the nav page:

http://www.duoh.com/csstutorials/2levelmenu/index.html

Example:

li#home a {
   width: 87px;
 }

Then this:

<li><a href="#">home</a></li>

should be something like this:

<li id="home" title="link to homepage"><a href="#">Home</a></li>

[Edited by PayneLess Designs on 15-Sep-10 20:22]

--
For economical web site designs, see us at:

http://PayneLessDesigns.com