Grow your CSS skills. Land your dream job.

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

  • # August 7, 2009 at 9:34 pm

    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
    # August 8, 2009 at 6:18 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 :)

    # August 8, 2009 at 11:28 am

    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.

    # August 8, 2009 at 1:24 pm

    So why can’t you just do it like this?

    Code:
    ul.nice-menu-down li.menuparent a {
    background:transparent url(arrow-down.png) no-repeat scroll right center;
    }
    # August 8, 2009 at 2:03 pm

    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.

    # August 8, 2009 at 3:09 pm

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

    As for the child links, give them their own specific rule:

    Code:
    ul li ul li a {
    background:whatever;
    }

    And you have a javascript error on the page "$ is not defined $.fn.addShim = function() {rn" from nice_menus.js?L (line 29)

    # August 8, 2009 at 3:29 pm
    "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:

    # August 8, 2009 at 5:21 pm

    Look at what you just posted:

    Quote:
    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;
    }

    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.

    # August 8, 2009 at 5:40 pm

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".