Menu Colors

[dmwhipp]

I'm trying to figure out how to make it so the main nav buttons stay orange as the drop down items are hovered. For example, when you hover over Volunteer under "How You Can Help", I would like How You Can Help to stay orange: http://www.dwwebdesigns.com/custom/
Deborah

[molendijk]

Use this as a start:
<li><a id="how_you_can_help" >How You Can Help</a>
<ul >
<li id="how_you_can_help1"><a>Donate</a></li>
<li id="how_you_can_help2"><a>Volunteer</a></li>
<li id="how_you_can_help3" ><a>Connect</a></li>
</ul>
</li>


<!-- Immediatey before the closing body tag -->
<script>
document.getElementById("how_you_can_help").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
document.getElementById("how_you_can_help").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
document.getElementById("how_you_can_help1").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
document.getElementById("how_you_can_help1").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
document.getElementById("how_you_can_help2").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
document.getElementById("how_you_can_help2").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
document.getElementById("how_you_can_help3").addEventListener("mouseover", function(){document.getElementById("how_you_can_help").style.background="#f68e1e"});
document.getElementById("how_you_can_help3").addEventListener("mouseout", function(){document.getElementById("how_you_can_help").style.background="#003d7d"});
</script>then try to simplify the code.

[jscheuer1]

If a javascript solution is acceptable, I see the page is already using jQuery 1.8.3, which would make things considerably simpler.

[molendijk]

Here's a shorter way that uses document.querySelectorAll:
<li onmouseover="orange()" onmouseout="blue()"><a id="how_you_can_help">How You Can Help</a>
<ul>
<li id="how_you_can_help1"><a>Donate</a></li>
<li id="how_you_can_help2"><a>Volunteer</a></li>
<li id="how_you_can_help3" ><a>Connect</a></li>
</ul>
</li>
End of body section:
<script>
var x = document.querySelectorAll("a#how_you_can_help, li#how_you_can_help1, li#how_you_can_help2, li#how_you_can_help3");
function orange() {
for (i = 0; i < x.length; i++)
{x[i].style.background="#f68e1e";}
}
function blue() {
var y = x;
for (i = 0; i < y.length; i++)
{y[i].style.background="#003d7d";}
}
</script>

[Beverleyh]

If I understand correctly, I think ul li:hover > a { background:gold } is all you need.

Basic example http://jsbin.com/zenutixopa/

[molendijk]

Of course! Of course! Thanks Beverleyh.
In this particular case: ul li:hover > a { background:#f68e1e }

[dmwhipp]

Thanks everyone for all of the assistance on this, but I'm using a template and corresponding stylesheet for responsive design which I'm trying to learn and understand line by line. When I tried adding the above coding I wasn't able to get it to work properly. Here is the main test page: http://www.dwwebdesigns.com/custom/. The stylesheet is here: http://www.dwwebdesigns.com/custom/responsee.css and what I believe to be the relative coding is below.


.top-nav ul { padding:0; }
.top-nav ul ul { position:absolute; background:#ff0000; } /* Have not yet determined what this background color affects */

.top-nav li { float:left; list-style:none outside none; cursor:pointer; }
.top-nav li a { padding:1.0em; display:block; color:#fff; background:#003d7d; } /* Original padding 1.25em, background color affects main nav items */
.top-nav li ul li a { background:none repeat scroll 0 0 #f68e1e; min-width:100%; padding:0.625em; } /* Resting drop down menu color, first level */
.top-nav li a:hover, .aside-nav li a:hover { background:#f68e1e; } /* Main nav bar mouse-over color */
.top-nav li ul li a:hover, .aside-nav li a:hover { background:#808080; } /* Added class for drop down nav item mouse-over color */

.top-nav li ul { display:none; }
.top-nav li ul li { float:none; list-style:none outside none; min-width:100%; padding:0; }
.top-nav li ul li ul li { float:none; list-style:none outside none; min-width:100%; padding:0; }

.top-nav .active-item a { background:none repeat scroll 0 0 #999; }

[Beverleyh]

I tried adding the above coding I wasn't able to get it to work properly

I think I see where you've gone wrong. You've used this in your stylesheet; .top-nav ul li:hover > a:hover { background:gold; }

But if you check my example, you'll see that there aren't two :hover selectors - just the one.

.top-nav ul li:hover > a { background:gold; } works in dev tools.

[dmwhipp]

Thank you so much! I came close when trying to figure this out, but never had the right arrow/greater than. BTW, what is the correct term for that operator when coding?
Again, thanks!
Deborah

[Beverleyh]

No problem - in CSS, its a child combinator selector

[dmwhipp]

Thanks again!