Html CSS悬停无法清晰地工作

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

我已经用纯CSS完成了这项工作。第一个下拉列表不起作用，尽管它有相同的CSS

只有第二个下拉菜单起作用

出什么事了

HTML:

---

您需要一些内容才能让第一个下拉菜单正常工作

硅钙石
下拉菜单1
内容1
内容2
下拉菜单2
内容1
内容2

+

是相邻的同级选择器。您的

#下拉列表

与第一个链接不相邻（直接在后面）。您可以改为使用常规同级选择器

~

---

一个文档不应该有多个元素具有相同的

id

。

+

选择器的一个很好的解释：

    <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>

#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;
}

 <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>

.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;
}