Question

我的菜单中有两个下拉链接。当您将鼠标悬停时，它将显示为灰色区域。

我用纯CSS完成了这个。第一个下拉列表虽然具有相同的CSS，但不起作用！

只需第二个下拉菜单即可。

出了什么问题？

HTML：

    <ul id="nav_menu">
        <li><a class="nav_menu_link">Startseite</a></li>
        <li class="nav_menu_drop nav_menu_link_drop_1"><a class="nav_menu_link">DropDown 1</a></li>
        <li class="nav_menu_drop nav_menu_link_drop_2"><a class="nav_menu_link">DropDown 2</a></li>
        <div id="dropdown">
            <div id="content1" style="display: none;">Contetn1</div>
            <div id="content2" style="display: none;">Content2</div>
        </div>
    </ul>

CSS：

#nav_menu {
    position: absolute;
    display: block;
    margin-left: 250px;
    height: 80px;
    width: 100%;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: #e4e7eb;
    font-size: 18px;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_drop:hover + #dropdown {
    height: 500px;
    transition: height .35s;
}
.nav_menu_link_drop_1:hover + #dropdown #content1 {
    display: block !important;
    width: 100%;
    height: 500px;
    position: absolute;
}
.nav_menu_link_drop_2:hover + #dropdown #content2 {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#content1:hover {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: 500px !important;
    position: absolute;
}
#dropdown {
    width: 100%;
    margin-left: calc(-50% + 230px);
    top: 80px;
    height: 0;
    position: absolute !important;
    background: #C0C0C0;
    z-index: 10;
    transition: height .35s;
}
#dropdown:hover {
    height: 500px !important;
}

jsFiddle

Answer 1

+是相邻的兄弟选择器。您的#dropdown与第一个链接不相邻（紧接在之后）。你可以使用一般的兄弟选择器~

http://fiddle.jshell.net/x6s5R/2/

.nav_menu_drop:hover ~ #dropdown {
    height: 500px;
    transition: height .35s;
}
.nav_menu_link_drop_1:hover ~ #dropdown #content1 {
    display: block !important;
    width: 100%;
    height: 500px;
    position: absolute;
}

Answer 2

第一个下拉列表需要一些内容才能正常工作。

http://plnkr.co/edit/AxV1aRZfHzZBy51tYAs0?p=info

 <ul id="nav_menu">
    <li><a class="nav_menu_link">Startseite</a></li>
    <li class="nav_menu_drop nav_menu_link_drop_1"><a class="nav_menu_link">DropDown 1</a></li>
    <div id="dropdown">
        <div id="content1" style="display: none;">Contetn1</div>
        <div id="content2" style="display: none;">Content2</div>
    </div>
    <li class="nav_menu_drop nav_menu_link_drop_2"><a class="nav_menu_link">DropDown 2</a></li>
    <div id="dropdown">
        <div id="content1" style="display: none;">Contetn1</div>
        <div id="content2" style="display: none;">Content2</div>
    </div>
</ul>

CSS Hover不清楚

2 个答案: