I've been hired to create the CSS for a developing Drupal site. I needed to use a dropdown and I wanted to use the Superfish script, but it seems Drupal doesn't handle it as easily as we'd like, so I have to find an alternative.
Attached is a picture of the dropdown I'd like to create.
[attachment=0]menu-image.jpg[/attachment]
It has a 3px white padded border with a gradient background image but most importantly, it has Arrows next to each Parent link. Seems pretty straightforward, right? I thought so too.
Notice the arrows are not showing, but they are there. If I apply the background image to the entire UL, it fills in the padded area and I lose the pretty contrasting white border. If I apply the background image to the LI's or the LI links, it covers the arrows and they no longer show. Here's what I am working with:
/****************************** Global CSS for ALL menu types ******************************/ ul.nice-menu, ul.nice-menu ul { list-style: none; padding:0; margin: 0; }
ul.nice-menu-down a { padding: 8px; text-decoration:none; } ul.nice-menu-down li a { font-size:16px; font-weight:bold; font-family:Verdana, Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; }
ul.nice-menu-down li li a { border-top: 0; background:none; color:#000; background-color:#999999; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding:2px; }
ul.nice-menu-down ul { left: 0; }
ul.nice-menu-down ul li { clear: both; }
ul.nice-menu-down li ul li ul, /* Repeat for Garland header. */ #header-region ul.nice-menu-down li ul li ul { left: 12.5em; top: -1px; }
ul.nice-menu-down .menuparent a { padding-right: 15px; }
ul li.menuparent, /* Repeat for Garland header. */ #header-region ul.nice-menu-down li.menuparent { background: url(arrow-down.png) right center no-repeat; }
ul.nice-menu-down li.menuparent:hover, ul.nice-menu-down li.over, /* Repeat for Garland header. */ #header-region ul.nice-menu-down li.menuparent:hover, #header-region ul.nice-menu-down li.over { background: url(arrow-down.png) right center no-repeat; }
ul.nice-menu-down li li.menuparent, /* Repeat for Garland header. */ #header-region ul.nice-menu-down li li.menuparent { background: #eee url(arrow-right.png) right center no-repeat; }
ul.nice-menu-down li li.menuparent:hover, ul.nice-menu-down li li.over, /* Repeat for Garland header. */ #header-region ul.nice-menu-down li li.menuparent:hover, #header-region ul.nice-menu-down li li.over { background: #ccc url(arrow-right.png) right center no-repeat; }
As far as I can see, there is no way around this, but that's why I am needing some input. I can't find a way to keep the white border, the background gradient and the arrows all together. One always cancels out the other. The reason I wanted to use Superfish is because the arrows are embedded in the javascript, not the CSS and I did get Superfish to style exactly the way I originally designed it, but due to various factors and unless something changes, Superfish will not work. Mostly though, I just need to know I am versed in my CSS enough to know that I'm not missing something, perhaps I am.
its actually really simple - you have your LI with the arrow as the background image, and on top of that you have your A with the background image of the green gradient. You aren't going mad - it is there - its just hidden under the green :) Possibly a small re-evaluation of how to make it work would be good :) I would recommended just swapping the backgrounds of the LI and the A for a start and working out the bugs from there :)
Thanks Robski...I mean, I know they are there and I understand why it's doing this, but is there a workaround that is possible? The Arrows must stay attached only to the top level LI, meaning
ul.nice-menu-down li.menuparent
is the only way I can implement the background for the arrows (without them being attached to every LI, of course). So I can't really swap them to anywhere else.
I don't see where you are applying the background to the list items?
In this section:
ul.nice-menu li a { padding: 0.3em 5px 0.3em 5px; background:url(images/main-nav-bg.gif) repeat-x; }
And as for the arrows...
ul.nice-menu-down li.menuparent a { background:transparent url(arrow-down.png) no-repeat scroll right center; }
As for the javascript error, it's probably because I'm not running it in it's native drupal environment (developing this on localhost for right now)...I still get the same behavior either way.
I've tried dozens of combinations, nothing seems to work. Either the arrows show through and whites out the gradient background, or the gradient background shows but covers the arrows. :evil:
ul.nice-menu li a { padding: 0.3em 5px 0.3em 5px; background:url(images/main-nav-bg.gif) repeat-x; }
And as for the arrows...
ul.nice-menu-down li.menuparent a { background:transparent url(arrow-down.png) no-repeat scroll right center; }
What's the difference between ul.nice-menu li a and ul.nice-menu-down li.menuparent a? The second one is over-riding the first because it is more specific. main-nav-bg.gif should be the list item background not the link background.
I've been hired to create the CSS for a developing Drupal site. I needed to use a dropdown and I wanted to use the Superfish script, but it seems Drupal doesn't handle it as easily as we'd like, so I have to find an alternative.
Attached is a picture of the dropdown I'd like to create.
[attachment=0]menu-image.jpg[/attachment]
It has a 3px white padded border with a gradient background image but most importantly, it has Arrows next to each Parent link. Seems pretty straightforward, right? I thought so too.
Here is a link to the test dropdown:
http://illuminateddesigns.net/dropdown-test/
Notice the arrows are not showing, but they are there. If I apply the background image to the entire UL, it fills in the padded area and I lose the pretty contrasting white border. If I apply the background image to the LI's or the LI links, it covers the arrows and they no longer show. Here's what I am working with:
As far as I can see, there is no way around this, but that's why I am needing some input. I can't find a way to keep the white border, the background gradient and the arrows all together. One always cancels out the other. The reason I wanted to use Superfish is because the arrows are embedded in the javascript, not the CSS and I did get Superfish to style exactly the way I originally designed it, but due to various factors and unless something changes, Superfish will not work. Mostly though, I just need to know I am versed in my CSS enough to know that I'm not missing something, perhaps I am.
Please help if at all possible! :oops:
is the only way I can implement the background for the arrows (without them being attached to every LI, of course). So I can't really swap them to anywhere else.
ul.nice-menu-down li.menuparent a {
background:transparent url(arrow-down.png) no-repeat scroll right center;
}
http://illuminateddesigns.net/dropdown-test/
It seems to blank the background out but worse, adds the arrows to all child links off the .menuparent.
As for the child links, give them their own specific rule:
ul li ul li a {
background:whatever;
}
And you have a javascript error on the page "$ is not defined $.fn.addShim = function() {\r\n" from nice_menus.js?L (line 29)
In this section:
ul.nice-menu li a {padding: 0.3em 5px 0.3em 5px;
background:url(images/main-nav-bg.gif) repeat-x;
}
And as for the arrows...
ul.nice-menu-down li.menuparent a {
background:transparent url(arrow-down.png) no-repeat scroll right center;
}
As for the javascript error, it's probably because I'm not running it in it's native drupal environment (developing this on localhost for right now)...I still get the same behavior either way.
I've tried dozens of combinations, nothing seems to work. Either the arrows show through and whites out the gradient background, or the gradient background shows but covers the arrows. :evil:
What's the difference between ul.nice-menu li a and ul.nice-menu-down li.menuparent a? The second one is over-riding the first because it is more specific.
main-nav-bg.gif should be the list item background not the link background.
Thank you. :D
I'm not claiming to be an expert at CSS, that's why I needed help!
I definitely learned something here. Thank you again.