我曾经在此处的帮助下创建了一个菜单菜单。菜单很好,但我需要将下拉菜单和三 Angular 形的子菜单居中对齐到父菜单的中心。
我尝试对 css 进行一些更改,但效果很好,如果所有父菜单都具有相同的值,我可以使用固定值,但事实并非如此。我不确定如何修改 css 脚本以显示所有下拉菜单中心与其父菜单对齐。我也添加了相同的图片。
fiddle 示例是 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 */
}
最佳答案
*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;
}
关于jquery - 中心对齐巨型下拉菜单与父级父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22911831/