css - 带有悬停父项的下拉菜单

Question

我想要简单的下拉菜单。但我有一个问题。我希望当我将鼠标悬停在放置的元素 (drop-menu-items) 上时，我的父元素 (drop-menu-parent) 被涂成黑色，但它是白色的。我不能很好地解释它。你可以在这里看到它 -> http://jsfiddle.net/YEyuP/

Answer 1

我认为这就是您所需要的: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;

}
​

解释

我添加的是这个:

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

'>' 表示一个直接子项...因此，当鼠标悬停在#cat-nav 的直接子项上时，将为该标签分配黑色。

你也可以这样写:#cat-nav .drop-menu-parent:hover > a { color:#000; 它本来也能正常工作...事实上，第二位是更好的选择。