Javascript 通过css悬停的菜单项样式

如何创建如下所示的菜单效果

目前我的应用程序菜单如下所示

HTML:

<nav id="nav">
     <ul id="navigation">
     <li><a href="#" class="first">Reports</a></li>
     <li><a href="#">Analytics</a></li>
     <li><a href="#">Dashboards</a></li>
      <li><a href="#">Monitors &raquo;</a>
      <ul>
      <li><a href="#">Real time</a></li>
      <li><a href="#">Real time monitoring</a></li>
     </ul>
     </li>
     </ul>
</nav>

---

我不知道你的全部代码，但它是这样的：

ul#navigation:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #cbcbcb;
    border-width: 12px;
    margin-left: -12px;
}

---

您只需在菜单上定位三角形…

在任何子菜单的第一个

li

上使用边框技术制作的伪元素“三角形”似乎就是答案

*{
保证金：0；
填充：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
a{
颜色：白色；
文字装饰：无；
}
ul#导航李{
显示：内联块；
背景：#ccc；
垂直对齐：顶部；
位置：相对位置；
}
ul#导航>li>ul{
位置：绝对位置；
最高：100%；
左：0；
显示：无；
}
ul#导航>li:悬停>ul{
显示：块；
}
ul#导航>li>ul>li{
宽度：100%；
位置：相对位置；
背景：白色；
颜色：灰色；
边框底部：1px纯色灰色；
}
ul#navigation>li>ul>li:第一个孩子：之前{
位置：绝对位置；
内容：“；
底部：100%；
左：25%；
转化：translateX（-50%）；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
边框底色：白色；
边框宽度：12px；
}
ul#导航李a{
显示：块；
高度：0 1rem；
线高：25px；
填充：0.5雷姆；
}
ul#导航>li>ul>LIA{
颜色：灰色；
空白：nowrap；
}

请发布相关的HTML。@chipChocolate.py发布您的CSS不完整的HTML。请包含影响您菜单的整个CSS代码。@chipChocolate.py我已经发布了CSW您在哪里调用它？将三角形放在第一个子菜单

li

上比放在

ul

上更有意义，不是吗？不太可能，您将三角形放在顶部菜单本身的单个位置。除非您为每个子菜单移动它，否则它将无法正常工作…或者会正常工作？这不会对ui进行任何更改，是否缺少任何内容。我已经把css代码放进了我的文件中。我的只是一个演示来展示结构……它不应该直接复制到你的css中。我已经发布了我完整的css，我对html开发非常陌生。如何修改现有的一个以实现相同的目标？

ul#navigation:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #cbcbcb;
    border-width: 12px;
    margin-left: -12px;
}