悬停在 CSS 中不起作用

Question

CSS 中的 :hover 选择器存在问题，无法更改其他部分的显示。当我将鼠标悬停在列表项上时，它们会改变我想要的颜色，但它们也应该使子菜单出现。

当 ID 为 #men 的“列表项”悬停在上方时，它应该将 ID 为 #men_submenu 的部分的显示从“display:none”更改为“display:block”。这应该发生在“男人”、“女人”和“青年”身上。

这是它们通常的显示方式：

#men_submenu {
padding-top: 48px;
position: absolute;
display: none;
}
#women_submenu {
padding-top: 48px;
position: absolute;
display: none;
}
#youth_submenu {
padding-top: 48px;
position: absolute;
display: none;
}

当相应的列表项悬停在上面时，这就是显示应该更改的内容

#men:hover #men_submenu {
display: block;
}
#women:hover #women_submenu {
display: block;
}
#youth:hover #youth_submenu {
display: block;
}

我在 JSFIDDLE 的 CSS 部分底部分离了有问题的 CSS

这是 JSFIDDLE 中的 HTML 和 CSS：http://jsfiddle.net/RBlair/907twm7m/1/

我目前并不担心它的外观，只要它使子菜单显示即可， 非常感谢！

Answer 1

正如我在 cmets 中所建议的，这可以使用 jQuery 来实现。

工作代码片段：

$('#men').hover(function(){
    $('#men_submenu').slideDown('fast');
}, function(){
    $('#men_submenu').slideUp('fast');
});

#nav_wrapper {
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    box-shadow: 0px 5px 10px #444;
    display:inline;
    min-width: 1120px;
}
#nav {
    width: 550px;
    min-width: 550px;
    display: inline-block;
    padding-left: 120px;
    float: left;
}
#nav ul {
    list-style-type: none;
    padding: 0;
    position: relative;
    display: inline;
}
#nav ul li {
    display: inline-block;
    vertical-align: center;
    list-style-type: none;
}
#nav ul li a, visited {
    text-decoration: none;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 11px;
    padding-right: 11px;
    color: rgba(100, 100, 100, 1);
}
#nav ul li a:hover {
    color: rgba(255, 210, 0, 1);
    text-decoration: none;
}
#nav_content {
    padding-left: 13%;
    padding-right: 13%;
}
#nav_title {
    color: rgba(255, 210, 0, 1);
    font-family: HelveticaNeue-Light;
    font-size: 25px;
    display: inline;
    position: absolute;
    vertical-align: center;
    margin-top: 2px;
}
#search {
    float: right;
    vertical-align: center;
    margin-top: 5px;
}
#search_input {
    width: 125px;
    height: 18px;
    font-size: 10px;
    border-radius: 3px 3px;
    background-color: rgba(210, 210, 210, 1);
    border-style: solid;
    padding-left: 5px;
    border: none;
    vertical-align: text-bottom;
}
#search_submit {
    vertical-align: text-bottom;
    height: 21px;
    width: 21px;
    margin: 0;
    padding: 0;
}
#men:hover #men_submenu {
    display: block;
}
#women:hover #women_submenu {
    display: block;
}
#youth:hover #youth_submenu {
    display: block;
}
#men_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}
#women_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}
#youth_submenu {
    padding-top: 48px;
    position: absolute;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="nav_wrapper">
    <section id="nav_content">
        <section id="nav_title">NAME</section>
        <section id="nav">
            <ul>
                <li id="men"><a href="#">MEN</a>
                </li>
                <li id="women">	<a href="#">WOMEN</a>
                </li>
                <li id="youth">	<a href="#">YOUTH</a>
                </li>
                <li>	<a href="#">NEWS</a>
                </li>
                <li>	<a href="#">TEAM</a>
                </li>
                <li>	<a href="#">COMMUNITY</a>
                </li>
                <li>	<a href="#">BLOG</a>
                </li>
            </ul>
        </section>
        <section id="search">
            <form id="search" method="get" action="http://www.google.com/search">
                <input id="search_input" type="text" name="q" size="20" maxlength="100" placeholder="Search">
                <input id="search_submit" type="image" src="Images/Search2.png" alt="Search" height="22">
            </form>
        </section>
    </section>
</section>
<section id="men_submenu">
    <section class="snowboard_menu">Snowboard - Men</section>
    <section class="boot_menu">Boot - Men</section>
    <section class="binding_menu">Binding - Men</section>
    <section class="apparel_menu">Apparel - Men</section>
    <section class="accessiories_menu">Accessories - Men</section>
</section>
<section id="women_submenu">
    <section class="snowboard_menu">Snowboard - Women</section>
    <section class="boot_menu">Boot - Women</section>
    <section class="binding_menu">Binding - Women</section>
    <section class="apparel_menu">Apparel - Women</section>
    <section class="accessiories_menu">Accessories - Women</section>
</section>
<section id="youth_submenu">
    <section class="snowboard_menu">Snowboard - Youth</section>
    <section class="boot_menu">Boot - Youth</section>
    <section class="binding_menu">Binding - Youth</section>
    <section class="apparel_menu">Apparel - Youth</section>
    <section class="accessiories_menu">Accessories - Youth</section>
</section>

Working jsFiddle Demo with Sliding Animations

Answer 2

如果这需要工作

#men:hover  #men_submenu {

#men_submenu 应该是 #men 的子代 我已经编辑了你的 html 来向你展示它是如何工作的 http://jsfiddle.net/907twm7m/2/

 <li id="men"><a href="#">MEN</a>
                <section id="men_submenu">
 <section class="snowboard_menu">Snowboard - Men</section>
 <section class="boot_menu">Boot - Men</section>
 <section class="binding_menu">Binding - Men</section>
 <section class="apparel_menu">Apparel - Men</section>
 <section class="accessiories_menu">Accessories - Men</section>
</section>

将鼠标悬停在男性上以查看结果