Hi there,

I have this site here with a dropdown, I'm having trouble in making the dropdown menu parent page stay the same background color as when you scroll down to different pages...

http://www.manausfund.org.php5-21.we...p?page=funding


Lil help? Anything would be greatly appreciated.

Thanks

ugh losing my mind on this.... lil help?


Also, if some kind soul out there could possibly take a look and help out with the jumpy dropdown menus that would also be awesome.

I'm not seeing either of these problems you're describing in FF or IE. In what browser is the problem occurring?

tim

I am seeing it in FF4: http://prntscr.com/3hz0v. The same (color) appears in IE8. But I don't see any background: or background-color: declaration in your menu CSS?

Originally Posted by Reckoner

help out with the jumpy dropdown menus that would also be awesome.

Your hover class extends longer than your a class. Hens the reason for the jumping.

Thanks for the replies guys...

I should be more specific, I need to have it so that the main nav stays the background color when you scroll over other pages.

When you scroll over "our partners" to "lift up" you will then see that "our partners" does not stay the background color and it goes away.

Also, any two line item like "western colorado preschool cooperative" bg color extends past the menu. Tried fixing that last night to get rid of the bumpyness but now can't figure out how to make stuff with display: block without breaking incorrectly.

losing my mind over this haha

You will have to use javascript to make the parent element maintain the hover state when you "mouseover" the child elements.

off the top of my head

onmousover=this.parentNode.style.backgroundColor =  this.style.backgroundColor;

on the child elements should work.

hmm okay... do you happen to have an example of the code used to do something like that so that I can pretty much copy / implement?

Convert it into a function

function setParent(object) {
      e = getElementByid(object.id);
      e.parentNode.style.backgroundColor =  e.style.backgroundColor;
}

 onmousover="setParent(this);"

thanks for the reply chris. hmm sorry I don't follow... do you recommend that I apply the

onmousover=this.parentNode.style.backgroundColor = this.style.backgroundColor;

as a javascript function, and then apply the onmousover="setParent(this);" to the parent ul li's?

the onmouseover event is for the child elements

Right, but I just don't get where I implement this Function.. would it be a javascript function?

If so, then on each child element I include the onmouseout event?

Sorry this is quite frankly the most frustrating css menu issue I have ever encountered.... seems like it should be so simple.

First, you would create an external javascript file that's called for in the head of each page.

Using getelementbyid you identify the child elements by the id they should already have.

By using what Chris posted the parent's color stays the same when the child is hovered over as when the parent is hovered over. That's why you have to do it by the id of the child, since the behavior needed of the parent isn't required when directly interacting with it.

tim

Maybe I missed something in the discussions in this thread, but I don't see why this issue would require javascript to be solved

As on example, check out this menu
http://www.htmldog.com/articles/suck...downs/example/

It works fine without javascript.
And for those who are picky: yes, there is a small javascript there as well, but as far as I can tell it's only to make the menu compatible with old browsers (IE) that can't handle :hover for other than <a> tags. At least it works fine for me evan with javascript disabled.

Thanks for the reply lizciz... that actually got me on the right track. Getting sooo close now.

Added a #primary-nav li:hover {
background-color: #45585c;
color: #ffffff;
}
with a background-color which seemed to have added the background now when you mouse over the other elements in the dropdown.

Now the only thing is though... that the color of the text needs to be white when you mouse over it as well. Ugh. Any tips?

http://www.manausfund.org.php5-21.websitetestlink.com/


****. Also just realized that the :hover isn't working in Chrome to get the white text to show up... just cannot win with this menu

At a cursory look over, it would appear the the HTMLDog javascript is doing the same thing as I proposed, only their's is a much tidier solution and using the DOM and classNames rather than "fudging it" with getElementByID

I don't want this thread to meander off-topic, but CSS L4 will allow this stuff to be created very easily: http://dev.w3.org/csswg/selectors4/#subject

Originally Posted by Physicsguy

I don't want this thread to meander off-topic, but CSS L4 will allow this stuff to be created very easily: http://dev.w3.org/csswg/selectors4/#subject

So another fifteen - twenty years or so ....

Yeah that will be cool, but until then does anyone know what i can do?