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

HTML & CSS
1

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 in that 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>*/
2

Hi,

It’s hard to debug properly without seeing the images etc but the main problem is that your html should be nested lists and not just one list.

e.g. It should be structured like this.


<div id="navbar">
    <ul id="navigation">
        [B]<li>[/B]<a href="#">home</a>
           [B] <ul>[/B]
                <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>
           [B] </ul>
        </li>[/B]
    </ul>
</div>

Your code could be reduced quite a bit as you have stated the same height many times and you could have done that once. As you are using a sprite you could just change the background-position and not use the whole background image and repeat properties each time and save about 50% code (background-position: xpx ypx ).