如何让我的下拉菜单块居中对齐父项目块？

Question

我一直在尝试编辑我的下拉菜单，以便子项目位于父项目下方。我终于实现了中心化，结果发现每次我在父项目上方展开以显示下拉菜单时，菜单的其余部分都会落在下拉菜单的底部。

这里是示例的链接，它具有所有的编码。预先感谢您的帮助！我刚刚开始使用CSS和HTML也不管我有多少视频和教程观看和阅读，我似乎无法得到它的权利:(

https://www.w3schools.com/code/tryit.asp?filename=FEEMWLIFAMAO

Answer 1

尝试添加vertical-align: top;您.dropdown CSS像这样：

CSS

.dropdown { 
    vertical-align: top; 
} 

同样在一个单独的说明我会删除对.dropdown-content，并代替对宽度请在.dropdown上确定宽度，以确保它们的宽度相同并且在悬停时没有古怪的水平位置变化。另一个解决方案是使下拉位置：绝对;并将它们相对于链接进行定位。但无论主题:)

Answer 2

您可以将下拉内容的位置设置为absolute。要将下拉框居中，您必须将它们相对于父宽度进行定位。这将是这个样子你.dropdown:hover .dropdown-content {：

display: block; 
position: absolute; 
left: calc((100% - 150px)/2); 
width: 150px; 
text-align: center; 

为了解释这一定位远一点： 100%指的是你父母的宽度。把这个和你指定为你的下拉内容的width的150px区别开来。既然你希望你的盒子位于菜单按钮的下方，这个区别必须在左侧和右侧分开，因此你在每边都有一个填充(100% - 150px)/2。

Answer 3

无论是父元素和您要定位相对到上述母体都应用到他们的造型，这是不合适的结果position: relative属性，你似乎试图达到的子元素。

请阅读css position property及其值。

说明：你的孩子元素正在被显示作为block，其通过定义占用其自身的水平空间，而被定位relative到它的父元素，因此推后者相邻的其余部分在所述父元素下的导航元素。

解决方案：它的父：你似乎导航效果要努力实现一般是通过定位子导航绝对，相对导航元素，使得它出现在悬停完成。这样，所述子导航不会影响其分层放置在代码内的元素的位置。

CSS：

.dropdown:hover .dropdown-content { 
    position: absolute; 
    display: block; 
    width: 150px; 
    text-align: center; 
    //To position the element: 
    top: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
}