第二个选择器悬停在多级深度菜单中不起作用答案

【问题标题】：2nd selector hover not working in multi level depth menus第二个选择器悬停在多级深度菜单中不起作用
【发布时间】：2014-05-20 13:04:54
【问题描述】：

我已经挣扎了好几天试图完成这项工作 - 我开始看到一些尚未创造出来的东西从我眼前飘过。

问题是我需要使用零 Java 或 JQuery 仅使用 CSS 和 HTML 构建多级导航系统。

代码源将从 ASP 应用程序生成，因此导航系统的详细信息将存储在数据库中。因此，我可以在代码之外维护 ID 值和所有其他关系方面。

主要问题是试图找到足够的信息来帮助我理解 :HOVER 操作的工作原理 - 因为我无法让其他关卡从主关卡对 HOVER 做出反应。

我需要的是让 2 级菜单可见，并且只在主菜单悬停时显示相关选项。当您将鼠标悬停在下一个级别时，相关菜单也应该只打开。

用户在站点中的点击次数不得超过 3 次，因此我需要快速流畅地显示所有选项，因此我需要在此示例中仅单击 1 次即可做出最终选择 - 将鼠标悬停在每个选项上之后选项。

请帮忙。

我的 CSS 代码：

a {text-decoration:none;}
.L2:before {content:"["}
.L2:after {content:"]"}


.L1{
   width:30em;
   padding:6px;
   margin:6px;
   background-color:cyan;
   border-style:groove;
   width:120px;
   text-align:center;
   position:relative;
   display:inline;
   vertical-align:text-top;
   border-style:groove;
   height:2.5em;
   border-radius:10px 10px 10px 10px;
   z-index:1;
   visibility:visible;
}

.mnuL2 {
border-style:groove;
border-radius:10px 10px 10px 10px;
background-color:cyan;
}
.divider {
border-bottom-style:dashed;
}
    .Level2{
    width:20em;
    height:1.8em;
    visibility:hidden;
}

div[id^=mnu1] {
    position:absolute;
    padding:4px;
    margin:0 10px 0 0;
    display:inline;
    top:1.85em;
    visibility:visible;
}

div[id^=mnu2] {
    position:absolute;
    padding:4px;
    display:inline;
    top:1.85em;
    left:5px;
    /*visibility:visible;*/
}

.Level3 {
    visibility:hidden;
}


div[id^=One] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    /*visibility:visible;*/
    z-index:10;
}

div[id^=Two] {
    position:relative;
    top:5px;
    left:16px;
    display:list-item;
    visibility:visible;
    z-index:10;
}


.L1:hover{
   background:lightgray;
}


.L1:hover div[id^=mnu1]{
   background:lightgray;
   font-style:italic;
}

我的 HTML 代码

<!DOCTYPE html>
<html>
<head>
    <link href="OneStyle.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="NavSys">
    <div class="mnuParent">
       <div class=L1 id=mnu01><a href="#"> One</a></div>
       <div class=L1 id=mnu02><a href="#">Two</a></div>
       <div class=L1 id=mnu03><a href="#">Three</a></div>
    </div>

    <div class="mnuL2">
        <div Class="Level2">
           <div class="L2"  id="mnu11"><a href="#">One-001</a></div>
           <div class="L2" id="mnu12"><a href="#">One-002</a></div>
           <div class="L2" id="mnu21"><a href="#">Two-001</a></div>
           <div class="L2" id="mnu22"><a href="#">Two-002</a></div>
           <div class="L2" id="mnu31"><a href="#">Three-001</a></div>
           <div class="L2" id="mnu32"><a href="#">Three-002</a></div>
         </div>
        <div class="divider"></div>
        <div class="Level3">
           <div class="L3" id="One11"><a href="#">One11</a></div>
           <div class="L3" id="One12"><a href="#">One12</a></div>
           <div class="L3" id="One21"><a href="#">One21</a></div>
           <div class="L3" id="One22"><a href="#">One22</a></div>
           <div class="L3" id="Two11"><a href="#">Two11</a></div>
           <div class="L3" id="Two12"><a href="#">Two12</a></div>
           <div class="L3" id="Two21"><a href="#">Two21</a></div>
           <div class="L3" id="Two22"><a href="#">Two22</a></div>
           <div class="L3" id="Three11"><a href="#">Three11</a></div>
           <div class="L3" id="Three12"><a href="#">Three12</a></div>
           <div class="L3" id="Three21"><a href="#">Three21</a></div>
           <div class="L3" id="Three22"><a href="#">Three22</a></div>
       </div>
    </div>
</div>


</body>
</html>

【问题讨论】：

看看这个答案（纯 CSS 的多级导航）：stackoverflow.com/a/9101168/2772017

标签： jquery css html nav multi-level

【解决方案1】：

通常在创建纯 CSS 下拉菜单系统时，子菜单项会嵌套在父按钮中（每个菜单和子菜单通常标记为无序列表）。

您尝试做的事情永远不会奏效，因为您尝试定位的元素在 DOM 上比被悬停的元素更远。 CSS 可以向下遍历 DOM 树，但不能向上遍历。

以下是创建纯 CSS 下拉菜单的方法。

我假设您的标记不是一成不变的，实际上您可以移动菜单，以便它们嵌套在包含 li 的内部。

HTML：

<ul class="menu">
    <li>
        <a href="#">One</a>
        <ul class="menu">
            <li><a href="#">Sub1 A</a></li>
            <li>
                <a href="#">Sub1 B</a>
                <ul class="menu">
                    <li><a href="#">Sub2 A</a></li>
                    <li><a href="#">Sub2 B</a></li>
                    <li><a href="#">Sub2 C</a></li>
                </ul>
            </li>
            <li><a href="#">Sub1 C</a></li>
        </ul>
    </li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS：

.menu {
    padding: 0;
    margin: 0;
}
.menu .menu {
    display: none;
    position: absolute;
    left: 0;
    width: 200px;
}
.menu .menu .menu {
    left: 100%;
    top: 0;
}
.menu li {
    position: relative;
    float: left;
    list-style: none;
}
.menu .menu li {
    float: none;
}
.menu li:hover > .menu {
    display: block;
}
.menu a {
    display: block;
    border: 1px solid #fff;
    padding: 10px;
    background: lightgray;
}

这里有一个显示这个菜单的小提琴：http://jsfiddle.net/x9TnS/

这是一个基本的概念验证，您可以通过搜索“纯 CSS 下拉菜单”找到大量更详细的教程。

【讨论】：

【解决方案2】：

要完成这项工作，您必须：

在触发元素内添加关卡内容（首选版本）（click for Fiddle）

UL
 |- LI
 |- LI (trigger 1)
 |   |
 |   UL (content 1)
 |   |- LI
 |   |- LI
 |   |- LI
 |
 |- LI (trigger 2)
 |   |
 |   UL (content 2)
 |   |- LI
 |   |- LI
 |   |- LI
 |
 |- LI

或

在触发元素旁边添加关卡内容 (click for Fiddle)

NAV
 |- DIV (trigger 1)
 |- DIV (content 1)
 |- DIV (trigger 2)
 |- DIV (content 2)

或

在触发元素之后的某处添加关卡内容 (click for Fiddle)

NAV
 |- DIV (trigger 1)
 |- DIV (trigger 2)
 |- DIV (content 1)
 |- DIV (content 2)

任何其他结构都不适用于纯 CSS。

请注意，只有第一个版本在语义上是正确的。其他版本只提供一些更简单的样式。

【讨论】：