样式第三级菜单不起作用

Question

在我尝试创建大型菜单时，我坚持设置第三级子菜单的样式。第一个子菜单 (li ul) 不显示（显示：无）。然后我有 jquery 脚本，它显示悬停时的子菜单（li ul - 第一级）。如果窗口小于 768 像素，则激活点击功能（对于触摸屏）。

我的问题是当我想设置第三级子菜单的样式时（子菜单的子菜单 - li - ul - li - ul ）没有应用样式 - 我希望它始终显示，但被隐藏，显示：无应用于该 UL，但我将其设置为 display: block。所以它只在我悬停它的 LI 元素（li ul li hover）时显示。

所以基本上我想要做的是第一个子菜单（li - ul）在悬停时激活（或单击手机），但第二个子菜单（子菜单的子菜单）始终可见。当我尝试对其进行样式设置时，我会像这样访问它：li ul li ul，这不起作用。我应该如何访问它？此外，当我尝试悬停第三级子菜单时，菜单关闭，我没有像在 jquery 中那样指定它。

HTML

<div class="menu-container">
        <ul class="menu">
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Ovo je nesto</a>
                        <ul>
                            <li><a href="#">aaa</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Ovo je nesto</a></li>
                    <li><a href="#">Ovo je nesto</a></li>
                    <li><a href="#">Ovo je nesto</a></li>
                </ul>
            </li>
            <li><a href="#">Who are we?</a>
                <ul>
                    <li>This is mega menu</li>
                </ul>
            </li>
            <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
        </ul>
    </div>

CSS

.menu-container {
  width: 80%;
  margin: 0 auto;
  background: #333;
}
.menu {
  margin: 0 auto;
  list-style: none;
  padding: 0;
  position: relative;
}
.menu:before,
.menu:after {
  content: "";
  display: table;
}
.menu:after {
  clear: both;
}
.menu li {
  float: left;
  background: #e9e9e9;
  padding: 0;
  margin: 0;
}
.menu li a {
  text-decoration: none;
  padding: 1.5em 3em;
  display: inline-block;
  outline: 0 none;
}
.menu li ul {
  display: none;
  width: 100%;
  background: #333;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}
.menu li ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}
.menu li ul li a {
  color: #fff;
  padding: .2em 0;
}
.menu li ul li ul {
  display: block;
}
.menu li ul li ul li {
  display: block;
}
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
960px
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
TABLETS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
MOBILE 100%
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 767px) {
  .menu > li {
    float: none;
    width: 100%;
  }
  .menu > li > ul {
    position: relative;
  }
  .menu > li > ul li {
    float: none;
    width: 100%;
  }
}

jQuery

$(document).ready(function () {
    $(".menu li").hover(function () {
        if ($(window).width() > 767) {
            $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
        }
    });
    $(".menu li").click(function () {
        if ($(window).width() <= 767) {
            $('.menu ul li ul').not($(this).children("ul").fadeToggle(200)).hide();
        }
    });
});

演示：http://codepen.io/riogrande/pen/ZbaeKa

Answer 1

CSS 选择器.menu li ul li ul li 将选择第三级或更低级子菜单中的所有列表项。正如 sodawillow 所提到的，您可以使用类或直接后代选择器 > 来微调特定子菜单级别的样式。

---

以下 sn-ps 将修复子菜单悬停效果更直观 - 通过隐藏所有菜单直到其父级悬停。

JavaScript - 用这个替换整个淡入淡出/隐藏语句：

$(this).children("ul").fadeToggle(200);

CSS：

.menu li ul li ul {
  display: none;
}

---

如果你想让第二个子菜单在第一个子菜单可见时也可见，jQuery 选择器应该是$(".menu > li") 而不是只选择第一个子菜单，CSS 可以保持原样。

Answer 2

这些选择器可能针对相同的 li 元素，第一个非常宽泛，取消了以下几个的规则：

.menu li ul {
  display: none;
  width: 100%;
  background: #333;
  padding: 20px;
  position: absolute;
  z-index: 99;
  left: 0;
  color: #fff;
  margin: 0;
}

.menu li ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}

.menu li ul li ul {
  display: block;
}

.menu li ul li ul li {
  display: block;
}

您可以使用> 选择器来仅定位直接子级，但我强烈建议您使用类来帮助分离级别之间的样式：

<div class="menu-container">
    <ul class="menu-level1">
        <li><a href="#">Home</a>
            <ul class="menu-level2">
                <li><a href="#">Ovo je nesto</a>
                    <ul class="menu-level3">
                        <li><a href="#">aaa</a></li>
                    </ul>
                </li>
                <li><a href="#">Ovo je nesto</a></li>
                <li><a href="#">Ovo je nesto</a></li>
                <li><a href="#">Ovo je nesto</a></li>
            </ul>
        </li>
        <li><a href="#">Who are we?</a>
            <ul class="menu-level2">
                <li>This is mega menu</li>
            </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>