Drop-down menu with hovering parent item - css

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

I think this is what you need : http://jsfiddle.net/YEyuP/6/
HTML:
<nav>
<ul id="cat-nav">
<li>About</li>
<li>Contact</li>
<li class="drop-menu-parent">
Portfolio
<ul class="drop-menu-items">
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
<li>Some other category</li>
</ul>
</li>
<li>Testimonials</li>
<li>Browse Products</li>
<li>Support Forum</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 2

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

Answer 3

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;
}
​