[Solved] Dropdown is making me drop dead! Please help!

[Luminated]

Hey all,

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:

Code:

/******************************
Global CSS for ALL menu types
******************************/
ul.nice-menu,
ul.nice-menu ul {
list-style: none;
padding:0;
margin: 0;
}

ul.nice-menu {
padding:3px;
background:#fff;
border:1px solid #e4e4e4;
}

ul.nice-menu li {
border-top: 0;
float: left;
background-color:none;
/* Additional overrides to deal with Garland theme. */
margin: 0;
padding-left: 0;
}

/* Overrides for Garland header. */
#header-region ul.nice-menu li {
margin: 0;
/* Padding rules are needed to deal with Garland’s header line-height. */
padding-top: 0.1em;
padding-bottom: 0.1em;
background:none;
}

ul.nice-menu a {
padding: 0.3em 5px 0.3em 5px;
background:url(images/main-nav-bg.gif) repeat-x;
}

ul.nice-menu ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu ul {
top: 1.8em;
left: -1px;
border: 0;
margin-right: 0;
}

/* Override for Garland header. */
#header-region ul.nice-menu ul {
top: 1.7em;
}

ul.nice-menu ul li {
width: 12.5em;
}

/******************************
HORIZONTAL (down) menus
******************************/
ul.nice-menu-down {
float: left;
}

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.

Please help if at all possible! :oops:

[Rob MacKay]

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 :)

[Luminated]

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

Code:

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.

[Luminated]

That’s what I thought and I tried it, but here’s what happens when I add that value:

http://illuminateddesigns.net/dropdown-test/

It seems to blank the background out but worse, adds the arrows to all child links off the .menuparent.

[Luminated]

"apostrophe" wrote:

I don’t see where you are applying the background to the list items?

In this section:

Code:

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…

Code:

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:

[Luminated]

:shock:

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.

[Author]

Posts