Css 带儿童指示灯的垂直下拉菜单

这是一个垂直下拉菜单，但问题是指示器小箭头应该显示一个项目链接有其他子对象。我想要这样的东西：

这就是我所拥有的

<nav>
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a>
            <ul>
                <li><a href="#">SubLink1</a></li>  
                <li><a href="#">SubLink2</a>
                     <ul>
                         <li><a href="#">SubSubLink1</a></li>  
                         <li><a href="#">SubSubLink2</a></li>
                     </ul>
                </li>
                <li><a href="#">SubLink3</a></li>
            </ul>
        </li>
        <li><a href="#">Link6</a>
            <ul>
                <li><a href="#">SubLink4</a></li>  
                <li><a href="#">SubLink5</a></li>
            </ul>
        </li>
    </ul>
</nav>

---

您可以通过CSS使用：before伪元素（如下所示）以某种方式执行此操作：

首先将隐藏元素从ul更改为li：

另外，不要忘记更改：悬停事件以显示li元素，查看小提琴

然后使用：before显示箭头：

nav ul li > ul:before {
  content:" ";
  display:block;
  width:15px;
  height:15px;
  position:absolute;
  top:10px;
  left:-15px;
  background:url('yourarrow') no-repeat center;
}

---

选中此项

当前CSS中无法选择“向上”。最简单的解决方案是通过标记实现这一点——给那些有子菜单的LI一个类，并通过该类设置它们的格式。没有jQuery我能做到这一点吗？jQuery只是一个使编写JavaScript更容易的工具。当然，你也可以不用jQuery做任何事情——如果你有必要的知识……Yep@user3265921搜索更多关于这方面的信息，然后：after；允许您进行多种操作，在某些情况下避免额外的标记或JS。

nav ul ul {
  /*display:none; Remove this*/
}
nav ul ul li{
  display:none; /*Add this*/
}

nav ul li > ul:before {
  content:" ";
  display:block;
  width:15px;
  height:15px;
  position:absolute;
  top:10px;
  left:-15px;
  background:url('yourarrow') no-repeat center;
}