Jquery 带有向下箭头的CSS菜单

a:悬停，a:聚焦{ 文字装饰：无； 大纲：无； } .选项卡.导航选项卡{ 边框底部：2个实心ddd； } .tab.nav tabs li{ 边距：02px0； 位置：相对位置； } .tab.导航选项卡li.活动：之前{ 内容：； 位置：绝对位置； 底部：-28px； 左：68px； 边框：14px实心透明； 边框顶部颜色：红色； } .tab.导航选项卡li.活动：之后{ 内容：； 位置：绝对位置； 底部：-24px； 左：81px； 边框：12px实心透明； /*边框顶色：fff*/ } .选项卡.导航选项卡李a{ 边界：无； 填充：20px 53px； 字体大小：14px； 颜色：777； 背景：透明； 边界半径：0； 文字装饰：无； } /*.选项卡导航选项卡李a：悬停{ 颜色：红色； } */ .tab.nav tabs li a i{ 显示：块； 文本对齐：居中； 边缘底部：5px； } .选项卡导航选项卡li.active a， .选项卡导航选项卡li.活动a:焦点， .tab.nav tabs li.active a:悬停{ 边界：无； 背景：透明； 颜色：红色； 字体大小：粗体； 文字装饰：无； 过渡：背景0.20s线性0s； } .选项卡.选项卡内容{ 字体大小：14px； 颜色：777； 背景：fff； 线高：25px； 填充：10px； } .选项卡.选项卡内容h3{ 字号：26px； } @仅介质屏幕，最大宽度：479px{ .选项卡.导航选项卡李a{ 填充：10px； } .tab.导航选项卡li.活动：之前{ 左：28px； 底部：-24px； 边框宽度：12px； } .tab.导航选项卡li.活动：之后{ 左：30px； 底部：-20px； 边框宽度：10px； } } 圆片{ 宽度：15px； 高度：15px； 线高：70px； 显示：内联块； 边界半径：100px； 背景：白色； z指数：2； 位置：绝对位置； 左：45%； 文本对齐：居中； 字体大小：25px； 最高：89%； } span.round-tabs.one{ 边框：2个实心ddd； 颜色：ddd； } li.active span.round-tabs.1，li.active span.round-tabs.2，li.active span.round-tabs.3，li.active span.round-tabs.4，li.active span.round-tabs.5{ 背景：F8！重要； 边框：2个实心F8； 颜色：fff； } span.圆形选项卡/span.两个{ 边框：2个实心ddd； 颜色：ddd； } span.圆形选项卡/span.三个{ 边框：2个实心ddd； 颜色：ddd； } .nav选项卡>li.active>a span.round-tabs{ 背景：fafa； } 第一节 此处文本

第二节 此处文本

第五节 此处文本

第四节 此处文本

首先更正箭头的z-索引，即将其设置为9，现在您可以实现如下所示的点击显示箭头

$document.readyfunction{ $ul>li.onclick，函数{ $ul>li.filter.active.removeClassactive； $this.addClassactive； }; }; a:悬停，a:聚焦{ 文字装饰：无； 大纲：无； } .选项卡.导航选项卡{ 边框底部：2个实心ddd； } .tab.nav tabs li{ 边距：02px0； 位置：相对位置； } .tab.导航选项卡li.活动：之前{ 内容：； 位置：绝对位置； 底部：-28px； 左：68px； 边框：14px实心透明； 边框顶部颜色：红色； z指数：9； } .tab.导航选项卡li.活动：之后{ 内容：； 位置：绝对位置； 底部：-24px； 左：81px； 边框：12px实心透明； /*边框顶色：fff*/ } .选项卡.导航选项卡李a{ 边界：无； 填充：20px 53px； 字体大小：14px； 颜色：777； 背景：透明； 边界半径：0； 文字装饰：无； } /*.选项卡导航选项卡李a：悬停{ 颜色：红色； } */ .tab.nav tabs li a i{ 显示：块； 文本对齐：居中； 边缘底部：5px； } .选项卡导航选项卡li.active a， .选项卡导航选项卡li.活动a:焦点， .tab.nav tabs li.active a:悬停{ 边界：无； 背景：透明； 颜色：红色； 字体大小：粗体； 文字装饰：无； 过渡：背景0.20s线性0s； } .选项卡.选项卡内容{ 字体大小：14px； 颜色：777； 背景：fff； 线高：25px； 填充：10px； } .选项卡.选项卡内容h3{ 字号：26px； } @仅介质屏幕，最大宽度：479px{ .选项卡.导航选项卡李a{ 填充：10px； } .tab.导航选项卡li.活动：之前{ 左：28px； 底部：-24px； 边框宽度：12px； } .tab.导航选项卡li.活动：之后{ 左：30px； 底部：-20px； 边框宽度：10px； } } 圆片{ 宽度：15px； 高度：15px； 线高：70px； 显示：内联块； 边界半径：100px； 背景：白色； z指数：2； 位置：绝对位置； 左：45%； 文本对齐：居中； 字体大小：25px； 最高：89%； } span.round-tabs.one{ 边框：2个实心ddd； 颜色：ddd； } li.active span.round-tabs.1，li.active span.round-tabs.2，li.active span.round-tabs.3，li.active span.round-tabs.4，li.active span.round-tabs.5{ 返回 地面：F8！重要的 边框：2个实心F8； 颜色：fff； } span.圆形选项卡/span.两个{ 边框：2个实心ddd； 颜色：ddd； } span.圆形选项卡/span.三个{ 边框：2个实心ddd； 颜色：ddd； } .nav选项卡>li.active>a span.round-tabs{ 背景：fafa； } 第一节 此处文本

第二节 此处文本

第五节 此处文本

第四节 此处文本

---

@Lakhan Khandelwal您的代码运行良好，只需在使用z-index之前对齐伪选择器即可。Welcome@Lakhan Khandelwal:-，我在jQuery代码中做了一些更改，以删除li标记上的活动类。