need dropdown to appear in front

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.

 

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

 

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???

 

Add a bg image with an arrow to that item or some other indicator in the HTML?

 

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

 

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???

 

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

 

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.

 

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.

 

nope. same deal. the padding IS being applied but no picture.

????

 

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

 

well i did try that but since it did not work, i switched it back, hence it's current absence.

 

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:

 

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???

 

actually i figured it out. i just expanded the width of the image and move the position of the arrows within the image.

 

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.

 

heh, excellent

 

I tried this once, but struck out as I could not manage to get it working