在子菜单前使用css添加三角形 [英] Add triangle before submenu using css

问题描述

如何在以下示例中添加三角形

解决方案

希望这有帮助，我注释了一些你的CSS和jquery脚本。此外，在结尾添加样式，请随时参阅此链接 小提琴

我添加的css如下：

  .dropdown ul li ：first-child> a：after {
 content：''; 
 position：absolute; 
 left：30px; 
 top：-8px; 
 width：0; 
 height：0; 
 border-left：5px solid transparent; 
 border-right：5px solid transparent; 
 border-bottom：8px solid＃028F41; 
} 
  

How can i add triangle to the following example Fiddle

I need to remove the parent menu with white background and show triangle to to make it look more like this

I tried to add following css but it i snot working

.dropdown li:first-child > a:after {
{
    content: '';
    position: absolute;
    left: 10px;
    top: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #0A8F36;
    opacity:0.6;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

UPDATE:

I managed to make it work to some extend but still have some design issue, any help is appreciated

Latest Fiddle http://jsfiddle.net/wPWDm/17/

解决方案

Hope this helps, I have commented out some of your css and jquery scripts. Also, added a style at the end please kindly refer this link fiddle

The css I added follows,

.dropdown ul li:first-child > a:after {
 content: '';
 position: absolute;
 left: 30px;
 top: -8px;
 width: 0;
 height: 0;
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-bottom: 8px solid #028F41;
 }

这篇关于在子菜单前使用css添加三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！