中心对齐大型下拉菜单与父父级

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;
}