比方说，我有一个下拉菜单，我想知道是否可以将菜单本身及其子链接居中放置在固定宽度上，以便子链接的宽度不会改变如果主要环节更多？将子链接放置在父级以外

我相信，这将更好地解释它：

enter image description here

fiddle - 不是工作之一，但对于解释的缘故。

.menu { 
position: relative; 
margin-left: auto; 
margin-right: auto; 
width: 250px; 
background-color: #edf7f5; 
} 
.menu li { 
    display: inline-block; 
    font-family: sans-serif; 
    text-transform: uppercase; 
    color: blue; 
} 

.menu li:nth-child(2) ul { 
    display: none; 
} 

    .menu li:nth-child(2) ul li { 
     padding-right: 10px; 
    } 

.menu li:nth-child(2):hover ul { 
    position: absolute; 
    left: 0; 
    top: 30px; 
    display: inline-block; 
    width: 500px; 
}

来源

2014-09-11 user2695684

你能发布你的代码和jsfiddle？ – 2014-09-11 12:57:29

是的，但没有看到任何代码，很难说如何实现它 – Huangism 2014-09-11 12:59:11

你的意思是[像这样]（http://leavesofcode.net/2012/08/30/more-pure-css-menus/）？ – Blazemonger 2014-09-11 13:01:10

添加position:relative;父和left: -50%;孩子ul例如

.menu li:nth-child(2):hover ul { 
    position: absolute; 
    left: -50%; 
    bottom: -40px; 
    display: inline-block; 
    width: 500px; 
    height:40px; 
}

确保高度和底部的位置是一样的

DEMO

来源

2014-09-11 12:58:34

如果我在子菜单的主菜单中添加更多链接，这不会非常有效。我试过左边：-50％，但它根本不适合我。 – user2695684 2014-09-11 13:49:00

将子链接放置在父级以外

回答

DEMO

相关问题