Question

我遇到问题：CSS中的悬停选择器没有更改其他部分的显示。当我将鼠标悬停在列表项上时，它们会改变我想要的颜色，但它们也应该显示子菜单。

当id为#men的'list item'悬停时，它应该将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

正如我在评论中所建议的那样，这可以使用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>

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

在CSS中悬停不起作用

2 个答案: