need dropdown to appear in front

Discussion in 'CSS' started by sixrfan, Jun 3, 2010.

  1. #1
    i'm using the process outlined here (http://wphacks.com/how-to-make-categ...rop-down-menu/) to create the horizontal category navigation bar on this site: http://castilloleathergoods.com/.

    "Pool Cue Cases" is the only category that has any child categories so when you hover over that heading, you'll see the dropdown.

    In Internet Explorer, part of the dropdown gets covered by the rotating image gallery plugin on the homepage. what do i do so that the dropdown appears in FRONT of this content???

    please advise. thanks.
     
    sixrfan, Jun 3, 2010 IP
  2. pmek

    pmek Guest

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi sixrfan,

    You'll be pleased to know that it's actually a very easy fix. Just add a z-index attribute to #navigation li ul, for example:

    #navigation li ul { z-index:5; }

    Because the rotator uses z-index to position the images above one another, it is also being positioned above the menu. By setting the menu to 5 it puts it above the images because that is above their highest z-index. To be safe you could set it to something like 999 so it's always on top...
     
    pmek, Jun 4, 2010 IP
    sixrfan likes this.
  3. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    that worked. thank you!

    now to piggy back on that question, how do i get the "POOL CUE CASES" list item to have some sort of arrow or other indicator next to it to show to the visitor that there's actually a dropdown under that heading???
     
    sixrfan, Jun 4, 2010 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Add a bg image with an arrow to that item or some other indicator in the HTML?
     
    wd_2k6, Jun 4, 2010 IP
  5. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If you want a text-only fix, use something like ↓ which will give you a downwards pointing arrow. If you want something css-based, then you need to set an additional class name for the dropdown, either in the li tag (something like class="cat-item cat-item3 dropdown") or in the a tag.

    If this is being generated automatically then you'll need to grab the code that outputs the li or a tag and modify it (probably by matching the link text).
     
    irving, Jun 4, 2010 IP
  6. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #6
    well there's php code that generates the list. it's basically the wordpress wp_list_categories php function.

    so i cant really change the category name to be "POOL CUE CASES ↓". i need some sort of CSS trick, but i'm not sure how.

    any ideas???
     
    sixrfan, Jun 4, 2010 IP
  7. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If your category id for the Pool Cue Cases is always going to be '3', then you can just add this to your css:

    
    li.cat-item-3 {
    background-image: url('link-to-down-arrow-image.gif') right no-repeat; /* this will add the image to the right side of the list item */
    padding-right: 20px; /* change this value to make your image appear without the text over it - it should be about 5px larger than your image width unless it fits fine anyway, in which case delete this line */
    }
    
    Code (markup):
    And that should do it.

    Edit: if you want to make sure this only happens in your nav bar, then switch out li.cat-item-3 for #navigation li.cat-item-3
     
    Last edited: Jun 4, 2010
    irving, Jun 4, 2010 IP
  8. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #8
    thanks irving. i have this in there now:

    
    #navigation li.cat-item-3  {
    background-image: url('http://castilloleathergoods.com/wp-content/uploads/2010/06/red-arrow.gif') right no-repeat;
    padding-right: 30px;
    }
    
    Code (markup):
    and it seems to be correctly applying the padding. but the arrow picture is not being insterted. please advise what's missing. thanks.
     
    sixrfan, Jun 4, 2010 IP
  9. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    hrm. first, try changing the #navigation li.cat-item-3 to
    #navigation li.cat-item-3 a
    Code (markup):
    and see if styling the anchor link will display the image instead.

    Yup, just checked that with Chrome in element explorer and it seems to work, so your code should be:

    
    #navigation li.cat-item-3  a{
    background-image: url('http://castilloleathergoods.com/wp-content/uploads/2010/06/red-arrow.gif') right no-repeat;
    padding-right: 30px;
    }
    
    Code (markup):
    Though looking at it I think 20px is a better padding value - your call.
     
    Last edited: Jun 4, 2010
    irving, Jun 4, 2010 IP
  10. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #10
    nope. same deal. the padding IS being applied but no picture.

    ????
     
    sixrfan, Jun 4, 2010 IP
  11. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I just checked your css and it's still showing as:

    
    #navigation li.cat-item-3 {
    background-image: url('http://castilloleathergoods.com/wp-content/uploads/2010/06/red-arrow.gif') right no-repeat;
    padding-right: 30px;
    }
    
    Code (markup):
    where it needs to be:

    
    #navigation li.cat-item-3 a {
    background-image: url('http://castilloleathergoods.com/wp-content/uploads/2010/06/red-arrow.gif') right no-repeat;
    padding-right: 30px;
    }
    
    Code (markup):
     
    irving, Jun 4, 2010 IP
  12. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #12
    well i did try that but since it did not work, i switched it back, hence it's current absence.
     
    sixrfan, Jun 4, 2010 IP
  13. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Sorry - I made a dumb mistake.

    
    #navigation li.cat-item-3 a {
    background: url('http://castilloleathergoods.com/wp-content/uploads/2010/06/red-arrow.gif') right no-repeat;
    padding-right: 20px;
    }
    
    Code (markup):
    Give that a go and you should get:

    [​IMG]
     
    irving, Jun 4, 2010 IP
    sixrfan likes this.
  14. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #14
    that worked! thank you.

    as a followup though, the arrow is aligned to the right as teh background. but is there any way to add a little more space between the arrow and the right-hand border???
     
    Last edited: Jun 7, 2010
    sixrfan, Jun 7, 2010 IP
  15. sixrfan

    sixrfan Well-Known Member

    Messages:
    354
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #15
    actually i figured it out. i just expanded the width of the image and move the position of the arrows within the image.
     
    sixrfan, Jun 7, 2010 IP
  16. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #16
    There are a couple of ways to do that but the easiest would be to add more space on the right side of the arrow in the image itself, and then increase the padding-right value.
     
    irving, Jun 7, 2010 IP
  17. irving

    irving Peon

    Messages:
    65
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #17
    heh, excellent :)
     
    irving, Jun 7, 2010 IP
  18. johagulo

    johagulo Peon

    Messages:
    879
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #18
    I tried this once, but struck out as I could not manage to get it working
     
    johagulo, Jun 12, 2010 IP