I'm building the following website:
http://bit.ly/NlzavE

and I'm coding a dropdown menu in the navigation, in the same way that I do on a lot of other websites.

The problem I'm having here is that I need the parent link to remain in its hover state while its descendants are hovered.

I've managed this on several recent projects however on this one it just doesn't seem to be working! I can't even think what I'm doing different.

I've attached a screenshot to show how the parent link isn't showing as its hover state when it should.

Here is the code I'm using:

#nav {
    float: left;
    font: bold 14px 'Din Display Pro Medium', arial, helvetica, sans-serif;
    text-transform: uppercase;
}

#nav > li {
    float: left;
    padding: 5px 20px;
    position: relative;
}

#nav > li > a {
    color: #666666;
    display: block;
    float: left;
    padding: 5px 10px;
    text-shadow: 1px 1px #fff;
    text-decoration: none;
}

#nav > li > a:hover, #nav > li > a:active, #nav > .current_list_item > a {
    background: #231f20;
    background: linear-gradient(to bottom,  #231f20 0%,#391f36 100%);
    -pie-background: linear-gradient(to bottom,  #231f20 0%,#391f36 100%);
    border-radius: 5px;
    color: #fff;
    position: relative;
    text-shadow: none;
    z-index: 0;
}

#nav .children {
    display: none;
    background: #391f36;
    background: linear-gradient(to bottom,  #391f36 0%,#5a2057 100%);
    -pie-background: linear-gradient(to bottom,  #391f36 0%,#5a2057 100%);
    border-radius: 0 5px 5px 5px;
    float: left;
    left: 20px;
    padding: 10px;
    position: absolute;
    top: 35px;
    width: 250px;
}

#nav .children li {
    float: left;
    display: inline;
}

#nav .children a {
    background: url('../image/icon-arrow-01.png') no-repeat 0 7px;
    color: #b3b3b3;
    display: block;
    float: left;
    margin-right: 20px;
    padding-left: 15px;
    text-decoration: none;
}

#nav .children a:hover, #nav .children a:active, #nav .current_list_item a {
    color: #a4cd39;
}

Can anyone see what the issue might be? It's fairly simple CSS and as I say, I've managed it in the past and just can't see what is different about this one!

CSS does not cascade backwards (meaning a child cannot affect the parent element).

You will have to use javascript to change the parent element state with (this.parentNode.className) in the onMouseOver event handler for the child element.

Hi there do as follows:

1- find crftncntrcts/script/dropdown.js and open it
2- find the code below:

// animate .children on hover
$('#nav .dropdown').hoverIntent(function() {
$(this).find('.children').slideDown(500);
}, function() {
$(this).find('.children').slideUp(500);
});

and change it to this:

// animate .children on hover
$('#nav .dropdown').hoverIntent(function() {
$(this).find('.children').slideDown(500);
$(this).find('a').addClass('hovered');
}, function() {
$(this).find('.children').slideUp(500);
$(this).find('a').removeClass('hovered');
});

3- in the crftncntrcts/information.htm add a css rule like this:

.hovered {
background: #231F20;
background: -webkit-linear-gradient(to bottom, #231F20 0%,#391F36 100%);
-pie-background: -webkit-linear-gradient(to bottom, #231f20 0%,#391f36 100%);
border-radius: 5px;
color: white;
position: relative;
text-shadow: none;
z-index: 0;
}

Hope this can help.

Regards;

Christopher Amirian