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>*/ Code (markup):