html - 当鼠标悬停在链接上时 div 不出现

Question

我目前有一个侧边菜单。如果用户将鼠标悬停在“管理契约(Contract)”按钮上，我会喜欢它，然后会出现子菜单。我创建了两个 ul - 主菜单和一个子菜单 ul。原因是因为我不希望子菜单继承主菜单的样式，如果这有意义的话？但是目前，当鼠标悬停在“管理契约(Contract)”按钮上时，我无法显示菜单。有什么想法吗？

html:

<div id="navbar-side">

    <div id="profile-image">

    </div>
    <div id="menu-search">
        <input type="text" name="search" id="search" placeholder="Search..." />
    </div>
    <ul id="side-menu">
        <li><a href="#" title="Dashboard">Dashboard</a></li>
        <li><a href="#" title="Manage Contracts" id="contracts">Manage Contracts</a></li>
        <li><a href="#" title="Manage Duplicates">Manage Duplicates</a></li>
        <li><a href="#" title="PPM Manager">PPM Manager</a></li>
        <li><a href="#" title="Service User Search">Service User Search</a></li>
        <li><a href="#" title="My Subscriptions">My Subscriptions</a></li>
        <li><a href="#" title="Help Centre">Help Centre</a></li>
    </ul>

    <ul id="contracts-menu">
        <li><a href="#">General</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Communication</a></li>
        <li><a href="#">Contract Details</a></li>
        <li><a href="#">Retail Setup</a></li>
    </ul>
</div>

CSS:

#side-menu 
{
width:100%;
position:relative;
}

#side-menu li 
{
display:block;
border-bottom:solid 1px black;
}

#side-menu a 
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}

#side-menu a:hover 
{
background-color:Silver;
}

#contracts-menu 
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}

#contracts-menu li 
{
display:block;
}

#contracts-menu a 
{
display:block;
}

a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}

Answer 1

那是因为 a#contracts 和 div#navbar-side 不是兄弟!

您不能使用 +和/或 ~非兄弟元素上的选择器。

另一方面，CSS 中还没有父级选择器(目前)。

您可以使用 JavaScript 来实现此目的或更改您的标记结构，如下所示:

 <li><a href="#" title="Manage Contracts" id="contracts">Manage Contracts</a>
    <ul id="contracts-menu">
        <li><a href="#">General</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Communication</a></li>
        <li><a href="#">Contract Details</a></li>
        <li><a href="#">Retail Setup</a></li>
    </ul> 
 </li>

CSS:

a#contracts:hover + ul#contracts-menu {
    display:block;
}

JSBin Demo .

更新

但在这种情况下，无需为每个链接/元素设置 id 属性。

您可以在每个列表项中嵌套子菜单并显示如下:

#side-menu li:hover > ul {  /* Select the ul children inside each list-item */
    display:block;
}

JSBin Demo #2