css - 親アイテムがホバリングされたドロップダウン メニュー

Question

シンプルなドロップダウンメニューが欲しい。しかし、私には1つの問題があります。ドロップされたアイテム (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; } そして、それは同じように機能します...実際、この 2 番目のビットの方が優れたオプションです。

Answer 2

追加：

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

Answer 3

私があなたを正しく理解したかどうかはわかりませんが（？）、ここに例があります。これはどういう意味ですか？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;

}

</ p>