Question

我目前有一个侧边菜单。如果用户将鼠标悬停在“管理合同”按钮上，则会显示子菜单。我创建了两个ul - 主菜单和子菜单ul。原因是因为我不希望子菜单继承主菜单中的样式是否有意义？但是，当鼠标悬停在“管理合同”按钮上时，我无法显示菜单。有什么想法吗？

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

您可以将子菜单嵌套在每个列表项中，并按如下方式显示它们：

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

<强> JSBin Demo #2

Answer 2

如果您不想使用javascript，可以将ul＃contracts-menu放在包含#contracts锚点的list-item中：

<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 id="contracts">
            <a href="#" title="Manage 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>
        <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>
</div>

将id添加到列表项（而不是锚点），然后添加：

#side-menu li.contracts:hover #contracts-menu { display:block; }

请参阅：http://jsfiddle.net/FmR3f/

当鼠标悬停在链接上时，div不会出现

2 个答案:

更新