Hey,
I’m using Wayfinder to create a two level accordion menu for my site. For the first level (class="accordion-menu")- I’m using a CSS Sprite image. For the second level (class="submenu")-the menu items are just plain text. However - the overall CSS Sprite image keeps showing up even when I try setting background-image:none or using a plain white background image.
I’m banging my head - any thoughts?
Here’s the CSS:
.accordion-menu ul{list-style-type:none;}
.accordion-menu ul li a{display:block; width:150px; height:50px; text-decoration:none;color:#ffffff;font-size:.1em;}
.accordion-menu li#nav15 a{ background:url(’assets/css/images/LeftNavTop.png’) no-repeat -450px -100px;}
.accordion-menu li#nav15.active a{background-position: -450px 0px;}
.accordion-menu li#nav15 a:hover {background-position: -450px 0px;}
.accordion-menu li#nav2 a{ background:url(’assets/css/images/LeftNavTop.png’) no-repeat 0px -100px;}
.accordion-menu li#nav2.active a{background-position: 0px 0px;}
.accordion-menu li#nav2 a:hover {background-position: 0px 0px;}
.accordion-menu li#nav4 a{ background:url(’assets/css/images/LeftNavTop.png’) no-repeat -150px -100px;}
.accordion-menu li#nav4.active a{background-position: -150px 0px;}
.accordion-menu li#nav4 a:hover {background-position: -150px 0px;}
.accordion-menu li#nav5 a{ background:url(’assets/css/images/LeftNavTop.png’) no-repeat -300px -100px;}
.accordion-menu li#nav5.active a{background-position: -300px 0px;}
.accordion-menu li#nav5 a:hover {background-position: -300px 0px;}
.accordion-menu li#nav6 a{ background:url(’assets/css/images/LeftNavTop.png’) no-repeat -600px -100px;}
.accordion-menu li#nav6.active a{background-position: -600px 0px;}
.accordion-menu li#nav6 a:hover {background-position: -600px 0px;}
.accordion-menu ul.submenu{list-style-type:none; margin-left:10px;}
.accordion-menu ul.submenu li a{font-size:1em;color:#2c9545; height:10px; padding:5px 0 5px 0px; background:url(’assets/css/images/white.png’) repeat top left;}
.accordion-menu ul.submenu li a:hover{color:#ef3f23;background:url(’assets/css/images/white.png’) repeat top left;}
.activemenu{background:ffffff;color:#ef3f23;display:block;width:auto; padding:3px 0 3px 0px;}
.accordion-menu ul.submenu li a.activemenu{background:#ffffff;color:#ef3f23; display:block;width:auto;padding:3px 0 3px 0px;}
Try setting a background color for your inner menu items.
"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
An a isn’t a block element, so you may be running into issues there. Try applying a background color to the li, or set the a to display block. Also, set it for background-image:none at the same time.
"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
Okay, I think there may be two things going on here, just run some tests to find out for sure.
1. I think there may be a specificity issue. Add in tags and ids to the call for the li or a to test that, see if that works.
2. It seems you are calling your sprite in a way that it calls the sprite for the submenu as well, even though it shouldn’t. Go into your css and add the equivalent of:
.yourmenu ul ul {background: none;} so that you aren’t getting the background image on the nested ul’s. Hope those help...
"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
the css: " .accordion-menu li#nav2 a " which is used to set the background for the main menu also selects your submenu links
It is more specific for the submenu "a" than the css selector you are using for the submenu - which is:
.accordion-menu ul.submenu li a
This needs to be more specific - try
.accordion-menu li#nav2 li a
(to replace " .accordion-menu ul.submenu li a " )
works for me when I tested in a browser on the Fitness submenu
Bill
First of all, you can put all the calls in for one rule, separated by commas, i.e.
li#nav2 a, li#nav3 a {
stylerule:here;
]
Second of all, you can apply a class to all of your li so that you don’t have to call each individually.
"Great spirits have always encountered violent opposition from mediocre minds." -Albert Einstein
I tried your suggestion for #2 - made small progress - it is now just showing the appropriate image for the submenu link - not the entire sprite - however it is there for active image. Very aggravating.