Put Triangle Above Menu Line

[chaseman]

I've set up a  test page trying to move the triangle shortly above the menu bar, but unfortunately when I adjust the top attribute to a negative number of the background-position then the arrow simply gets cut off, because of the division.

 

Here's the test page: http://www.webprofitideas.com/css_testing/

 

I want to have the triangle right above the SUB-MENU (the blue line) when somebody hovers over the menu items of my blog on http://www.webprofitideas.com, I use the jQuery plugin Superfish for the navigation bar.

 

I'm not even sure if my approach is the right way do to so, by simply using the triangle as a background, maybe there's a better approach. I'd appreciate some suggestions.

 

[prestonwinfrey]

position: relative;
top: -9px;

[chaseman]

How is that supposed to work? Top only works with position:absolute AFAIK.

[prestonwinfrey]

It works with relative positioning as well.

 

Here is an example: http://jsfiddle.net/YYZw5/

[chaseman]

It indeed works, I stand corrected.

 

So I think if I assign a div into the SUB-MENU with jQuery for example (meaning without touching the source code or superfish) I may be able to achieve the same thing that you showcased on your link.

[chaseman]

Thanks for your suggestion btw, I got it to work on the test page: http://www.webprofitideas.com/css_testing/

 

And I "technically" got it work on my blog with Superfish as well, the only problem I have is that arrow is not showing up at all. You can have a look it here, if you simply hover over CONTACT http://www.webprofitideas.com I made the background red on purpose so it's visible where the arrow SHOULD be, I can not figure out why the superfish_arrow.png is not showing up at all, any ideas?

[prestonwinfrey]

The arrow shows up for me in the link you provided. (Google Chrome 11)

[chaseman]

I don't know when you looked, maybe you looked when I uploaded the new version. But anyway I got it to work now. It's placed in the exact position I wanted it to be placed. The only problem I have now is that it shows up a tad bit too late, it's animated together with the sub-menu.

 

Not sure how exactly to fix that, but I'll tackle that problem sometime later, I just have too much else to do now.

 

Thanks again for your help.

 

EDIT:

 

The arrow didn't show up because I had the path wrong, jQuery path seems to work differently, I thought if I add it to the JS folder and simply directly call it would work, but it doesn't strangely I had to put it in the wordpress folder (outside of the theme). I will define a better path later once I've figured out how jQuery paths work.

 

 

[prestonwinfrey]

You're welcome!