Drop-down menu with hovering parent item

Question

I want simple drop-down menu. But I have one problem. I want when I hover over dropped items (drop-menu-items) my parent element (drop-menu-parent) to be colored with black, but it's in white. I can't explain it very well. You can see it here -> http://jsfiddle.net/YEyuP/

Answer 1

Not sure if I understood you right(?), but here's an example. Is this what you mean? jsFiddle

nav {
    background: #000;
}

#cat-nav {
    text-align: center;
    background-color: #0f0609, #0f0609;
    background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
    background-repeat: no-repeat, repeat-y;
    margin-top: -8px;
    display: block;
}

#cat-nav:after {
    content: " ";
    display: block;
    clear: both;

    width: 81%;
    padding-top: 8px;
    margin: 0 auto;
    background: url(teeth.png) repeat-x;
}

ul#cat-nav > li {
    text-align: center;
    display: inline-block;

}

#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }

ul .drop-menu-items  {
    position: absolute;
    display: none;
    background: #000 url(drop-menu-bg.png) bottom repeat-x;
    -webkit-box-shadow: 0px 5px 5px #8f8f8f;
    -moz-box-shadow:    0px 5px 5px #8f8f8f);
    box-shadow:         0px 5px 5px #8f8f8f;
    border-radius: 0 10px 10px 10px;

}

ul.drop-menu-items  li{
    background: url(drop-menu-bullet.png) no-repeat 5px center;
    float: none;
    position: relative;
    color: #000;
    padding: 5px 15px;
    margin: 0 10px; 
    border-bottom: 1px dotted #cecece;
}

ul.drop-menu-items  li:hover {
    background: #000 url(drop-menu-bullet.png) no-repeat  5px center;
} 

.drop-menu-parent:hover .drop-menu-items {
    display: block;
    z-index: 1000;
}

ul#cat-nav li   a:hover {
    background: #000;
    border-radius: 5px;
    color: #fff;
    /* padding-top: 5px; */

}

#cat-nav .drop-menu-items li a {
    color:     #fff;
}


#cat-nav .drop-menu-items li:hover a {
    text-decoration: underline;
    background: none;
    color:     #fff;
}

.drop-menu-parent:hover {
    background: #000;
    background-color: #000;
    border-radius: 5px 5px 0 0;

}

​

Answer 2

I think this is what you need : http://jsfiddle.net/YEyuP/6/

HTML:

<nav>
        <ul id="cat-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li class="drop-menu-parent">
                <a href="#">Portfolio</a>

                <ul class="drop-menu-items">
                    <li><a href="#" title="Some other category">Some other category</a></li>
                    <li><a href="#" title="Some other category">Some other category</a></li>
                    <li><a href="#" title="Some other category">Some other category</a></li>
                    <li><a href="#" title="Some other category">Some other category</a></li>
                </ul>
            </li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Browse Products</a></li>
            <li><a href="#">Support Forum</a></li>            

        </ul>
    </nav>
​

CSS:

nav {
    background: #000;
}

#cat-nav {
    text-align: center;
    background-color: #0f0609, #0f0609;
    background-image: url(cat-nav-bg.jpg), url(cat-nav-bg-bottom.jpg);
    background-repeat: no-repeat, repeat-y;
    margin-top: -8px;
    display: block;
}

#cat-nav:after {
    content: " ";
    display: block;
    clear: both;

    width: 81%;
    padding-top: 8px;
    margin: 0 auto;
    background: url(teeth.png) repeat-x;
}

ul#cat-nav > li {
    text-align: center;
    display: inline-block;

}

#cat-nav a:link { color: #fff; text-decoration: none; padding: 10px; display: inline-block;}
#cat-nav a:hover { color: #fff; text-decoration: none; }
#cat-nav a:visited { color: #fff; text-decoration: none; }
#cat-nav a:active { color: #fff; text-decoration: none; }

ul .drop-menu-items  {
    position: absolute;
    display: none;
    background: #fff url(drop-menu-bg.png) bottom repeat-x;
    -webkit-box-shadow: 0px 5px 5px #8f8f8f;
    -moz-box-shadow:    0px 5px 5px #8f8f8f);
    box-shadow:         0px 5px 5px #8f8f8f;
    border-radius: 0 10px 10px 10px;

}

ul.drop-menu-items  li{
    background: url(drop-menu-bullet.png) no-repeat 5px center;
    float: none;
    position: relative;
    color: #000;
    padding: 5px 15px;
    margin: 0 10px; 
    border-bottom: 1px dotted #cecece;
}

ul.drop-menu-items  li:hover {
    background: #f0f0f0 url(drop-menu-bullet.png) no-repeat  5px center;
} 

.drop-menu-parent:hover .drop-menu-items {
    display: block;
    z-index: 1000;
}

#cat-nav > li:hover a{
    color:#000;
}

ul#cat-nav li   a:hover {
    background: #fff;
    border-radius: 5px;
    /* padding-top: 5px; */

}

#cat-nav .drop-menu-items li a {
    color: #000;
}


#cat-nav .drop-menu-items li:hover a {
    text-decoration: underline;
    background: none;
    color:     #000;
}

.drop-menu-parent:hover {
    background: #fff;
    background-color: #fff;
    border-radius: 5px 5px 0 0;

}
​

explanation

What i have added is this :

#cat-nav > li:hover a{
    color:#000;
}

'>' indicates a direct child...so the direct child of #cat-nav when hovered over will assign a black color to the tag.

You could have also written : #cat-nav .drop-menu-parent:hover > a { color:#000; } And it would have worked just as well...Infact, this second bit is a better option.

Answer 3

Add:

ul#cat-nav li:hover a{
    color: #000;
}