Question

我试图在悬停时显示菜单。我在一个简单的例子中工作，但当我尝试将其添加到我的页面的其余部分时，包括其他div等，菜单不会显示。

#main_nav ul, #main_nav:active ul { 
    display: none;
}

#menu-icon:hover ul {
    display: block;
}

#menu-icon {
    display:inline-block;
    width: 35px;
    height: 35px;
    background: #4C8FEC url(../images/menu.jpg) center;
}

#main_nav ul {
    list-style: none;
}

<!doctype html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles/html4.css">
</head>
<body>
    <div id="header">
        <a href="#" id="menu-icon"></a>
        <h1>Main App Title</h1>
    </div>
    <div id="main_nav">
        <ul>
            <li><a href="#">Time Entry</a></li>
            <li><a href="#">Supervisors</a></li>
            <li><a href="#">Payroll</a></li>
            <li><a href="#">HR</a></li>
        </ul>
    </div>
</body>
</html>

Answer 1

您的选择器#menu-icon:hover ul是错误的：它会将样式设置为ul ed元素的子 hover！

要解决此问题，您应该使用同级选择器~。要解决此问题，我会抓取over中的#header事件，并使用规则#header:hover ~ #main_nav修改其兄弟。

请记住，只有这些规则，当您移动鼠标时，从标题到菜单它将再次消失！所以我将菜单稍微移到了顶部（15px），因此它与标题相交。

这是我的工作css：

#main_nav { 
    display: none;
    margin-top:-15px;
}

#main_nav:hover, #header:hover ~ #main_nav {
    display: block;
}

#menu-icon {
    display:inline-block;
    width: 35px;
    height: 35px;
    background: #4C8FEC url(../images/menu.jpg) center;
}

#main_nav  {
    list-style: none;
}

请在此处自行尝试：http://jsfiddle.net/d8EDS/3/

Answer 2

如果你将“main_nav”DIV和它的UL移动到标题中，上面提到的可用性问题是固定的（即用户实际上可以使用菜单） - 请注意，使用此修复程序删除兄弟的“〜”，因为元素被移动到使其成为孩子的位置

<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles/html4.css">
<style>
#main_nav { 
    display: none;
}

#header:hover  #main_nav{
    display: block;
}

#menu-icon {
    display:inline-block;
    width: 35px;
    height: 35px;
    background: #4C8FEC url(../images/menu.jpg) center;
}

#main_nav ul {
    list-style: none;
}
</style>
</head>
<body>
    <div id="header">
        <a href="#" id="menu-icon"></a>
        <h1>Main App Title</h1>
    <div id="main_nav"
        <ul>
            <li><a href="#">Time Entry</a></li>
            <li><a href="#">Supervisors</a></li>
            <li><a href="#">Payroll</a></li>
            <li><a href="#">HR</a></li>
        </ul>
    </div>
    </div>
</body>
</html>

简单的css嵌套div不会在悬停时显示

2 个答案: