中心将父级父级对齐mega下拉菜单

Question

我有时回来创建一个菜单菜单，在这里有一些帮助。菜单很好，但我需要对齐下拉菜单的子菜单。父菜单中心的三角形。

我尝试对css进行了一些更改，但它确实工作正常我可以使用固定值，如果所有父菜单都相同，但事实并非如此。我不知道如何修改css脚本以显示所有与其父菜单对齐的下拉菜单。我也在添加相同的图像。

小提琴示例是here

我做了一些CSS改变

.dropdown ul li:first-child > a:after
{
content: '';
position: absolute;
left: 80px; /* Changed this to 80px */
top: -18px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #E5E5E5;
opacity:1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}


.dropdown {
display:none;
position:absolute;
left:0;
top:100%;
background:#E5E5E5; 
border-left:0px solid #008438;
border-right:0px solid #008438;
border-bottom:0px solid #008438;
border-top:0px solid #008438;
padding:0 10px;
margin-left:-50px;  /* Changed this to -50px */
}

Answer 1

<强> DEMO

* CSS更新*

.dropdown ul li:first-child > a:after { 
    position: absolute;
    left: 50%;
    top: -18px;
    margin-left: -5px;
}

.dropdown > ul {
    width: 160px;
    margin: 10px 0;
    position: relative;
}

.nav li:hover .dropdown {
   display: block;
   left: -43px;
}